@maiertech/gatsby-theme-theme-ui

Styling

All @maiertech/gatsby-theme-<content_type>-core themes are themes that come without any opinion on styling. The idea is that you shadow all page components and use whatever you prefer for styling.

This theme on the other hand, is opinionated about styling. It wires up Theme UI for use with Gatsby and configures @maiertech/preset as theme. You can use any other Theme UI preset by shadowing index.js of gatsby-plugin-theme-ui.

Site metadata

This theme exports a Layout component. For this component to work, you need to define the following site metadata in your site’s gatsby-config.js:

Key Required Description
siteTitle Site title for header and footer.
siteAuthor Site author for footer.
siteNavLinks Navigation links for header and footer.

Plugins

Plugin Description
gatsby-plugin-catch-links Make @maiertech/components compatible with Gatsby by using Gatsby’s Link component for all internal links.
gatsby-plugin-theme-ui Wire up Theme UI for use with Gatsby.

Caveat

This theme has package theme-ui as a dependency (you can look up the version in its package.json). theme-ui relies on @theme-ui/mdx, which has @mdx-js/react as dependency (not peer dependency) and you can look up the version in its package.json).

The moment you use gatsby-plugin-mdx, you normally install @mdx-js/react as peer dependency. But at what version? If you run

yarn list --pattern mdx

and you see @mdx-js/react more than once (at different versions), you might be in trouble. Component MDXProvider from @mdx-js/react creates a context and when nested works as intended only, when all instances use the same context. But when the versions used by theme-ui and gatasby-plugin-mdx differ, you end up with conflicting contexts and the Theme UI styled MDX transformation breaks.

If you are unable to reconcile the version conflict yourself, your last resort is to add a resolutions property to your project root and decide which version should be used everywhere:

"resolutions": {
  "@mdx-js/react": "^1.6.22"
}

This works with Yarn only and the version should probably be the one from your @mdx-js/react peer dependency.