Use Component Shadowing to Override Gatsby Theme Components

Instructor: [00:00] Gatsby themes provide something called component shadowing, which allows us to override or modify components in the theme. To do this, we need to create a source folder, and then name the source folder after our theme. In this case, it'll be Jay Langsdorf, Gatsby theme events. Let's override theme.js.

[00:23] To start, we want to get the original theme. We'll import it as base theme from our theme. Then we're going to export a constant called theme. We'll start by extending the base theme.

[00:43] If we want to override our colors, we would also extend base theme.colors. Then we can override something like the primary color and make it blue. To see this in action, we need to stop and restart the server. Then we'll see the header turn blue.

[01:05] To override an entire component, we can create a new version of that component in the theme folder under components, and then the one that we want to override. In this case, let's override layout.js.

[01:19] We'll import React from React. Let's just remove everything from it so we can export default and get the children. We'll just export a fragment with the children, and that's it.

[01:37] After we stop and restart the server, we'll see that all of the styles and structure have been stripped away because the component's been overridden. To add something extra, we can drop it in here, added via component shadowing, and we'll see it show up immediately.