Add Theme UI to a Gatsby Site using gatsby-plugin-theme-ui and theme-ui
Theme UI is a library for building consistent, themeable React apps based on constraint-based design principles. It allows you to style any component in your application with typographic, color, and layout values defined in a shared theme object.
For this lesson, install the alpha versions of gatsby-plugin-theme-ui and theme-ui.: theme-ui@0.40-alpha.3 and gatsby-plugin-theme-ui@0.4.0-alpha.3.
Add styles to the layout component using the sx prop. Then install the @theme-ui/presets package and pass a preset in your gatsby-config file.
Instructor: [0:01] Begin by installing theme-ui and gatsby-plugin-theme-ui. You're going to install specific alpha versions that have special features not yet released. .4.-alpha.3 is the tag that you're looking for.
[0:28] Open up your gatsby-config file. You're going to add an object where the resolved plugin name is gatsby-plugin-theme-ui and the options are going to be left empty for the moment.
[0:42] Next, you want to go to your layout component. Instead of importing React from 'react', we're going to use a pragma /** @jsx jsx */.
[1:02] We also need to import { jsx } from 'theme-ui'. This allows us to add styles to our layout component. I'll add one here to start. const bodyStyles is an object, and in the object, we use special Theme UI keywords that correspond to CSS rules. This is marginX. We'll also add padding. I won't add them all here, but you can add a number of other styles to this page.
[1:46] Using the sx prop that we get from Theme UI, we can point to the object CSS rules that we've created -- bodyStyles, headerStyles, mainStyles and footerStyles. If we save and refresh our page, we'll see these styles applied.
[2:19] However, we can also add an underlined preset. We'll install @theme-ui/presets, which comes with a number of them. Once we do that, we can go to our gatsby-config file and edit the options object for gatsby-plugin-theme-ui. We're going to use the key preset and use @theme-ui/preset-funk, which is one of the presets that we've downloaded.
[2:52] If we rerun our site, we'll see that it's using the styles defined in that preset. Note that there are a number of other options available.%
Hey there! Ya, this is the main challenge with the 3.0 release, not all the plugins have caught up yet!
I'd recommend using resolutions (though you'll need to use yarn as your package manager instead).
In your package.json file you can add the following code:
"resolutions": {
"gatsby": "^3.0.1"
}
In the mean time I'll be sure to flag an upgrade in the theme UI repo as well!
The resolutions workaround worked like charm! Thank you!
Glad to hear it! And thanks so much for working through the course and raising this challenge. I have no doubt it will help others.
Hi Laurie! Thank you for this great course. I like that It goes straight to the point, very clear and concise. I have a question regarding this particular class. When I try to install Theme-UI I get an error, is it possible that is not yet compatible with Gatsby 3.0? I'm still a begginer so I would appreciate your help! I attach the exact error below:
"While resolving: blog-course-egghead@1.0.0 Found: gatsby@3.0.3 node_modules/gatsby gatsby@"^3.0.1" from the root project
Could not resolve dependency: peer gatsby@"^2.13.1" from gatsby-plugin-theme-ui@0.4.0-alpha.3 node_modules/gatsby-plugin-theme-ui gatsby-plugin-theme-ui@"0.4.0-alpha.3" from the root project"
Thank you in advance!