Add Theme UI to a Gatsby Site using gatsby-plugin-theme-ui and theme-ui

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.%