@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 mdxand 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.