Use and Override a Theme in Gatsby with Component Shadowing

Instructor: [00:00] To use the theme we've defined, we need to use something called component shadowing to override the default theme in Gatsby Theme UI.

[00:09] We do this by creating a folder with the same name as the theme in the source folder. We'll call it Gatsby Theme UI, and then we're going to shadow the index.js, which is where the theme is defined. We're going to import theme that we just defined in theme.js. We'll export default theme.

[00:37] Next, we'll refactor our layout to use theme UI. We'll start by importing the layout, but since that conflicts with our layout component, we're going to alias that as theme layout. We'll also import header, main, and container from theme UI.

[00:56] Once we have those components, we will start using them. Wrap the whole thing with theme layout. We'll set up a header. Move our h1 inside of that header. We'll set up the main component with the container inside of it, and move children inside of that.

[01:18] To see whether or not this worked, we can test it using yarn workspace site develop. On loading the site, we can see that our styles have been applied. We can also use the style import from Theme UI. To apply the styles we set, to regular imports.

[01:44] By replacing the h1 with style.h1, and doing the same for our UL and LI that we defined, we can see that our styles are now applied, including our hover styles.