Use Component Shadowing to Override Gatsby Theme Components

Jason Lengstorf
InstructorJason Lengstorf

Share this video with your friends

Send Tweet
Published 3 years ago
Updated a year ago

Take full advantage of the power of Gatsby themes using component shadowing, which allows you to selectively extend — or even replace! — specific components in your Gatsby themes.

For a written version of this course, check out the Gatsby docs.

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.

Samuel Suther
Samuel Suther
~ 2 years ago

This was an awesome gatsby course. Well explained (even if a little to low noise for the Video-Audio). Thanks a lot for creating this usefull gatsby-course.

BTW: Which config do you have for your vs-code (font & colors). I really like them.

Jason Lengstorf
Jason Lengstorfinstructor
~ 2 years ago

hey, happy it was useful! I keep a list of my themes/fonts/etc. at https://jason.af/uses

thanks!