Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "Component Shadowing" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason introduces component shadowing in Gatsby, which overrides a file in another theme or plugin without needing to modify the source code.

Get Unlimited Access Now

Transcript from the "Component Shadowing" Lesson

[00:00:00]
>> Jason Lengstorf: Before this is really gonna do anything useful we need to actually set these colors, right. And this is where we get into component shadowing. So component shadowing in Gatsby is a method for us to override a file in another theme or plugin. Without actually needing to modify the source code, or dive into node modules, or fully eject all the code.

[00:00:22] So we can just pick one thing that we want to change and change it and the plugin will pick that up. So to do that the way that it works is we can target the plugin we want to change so gatsby-plugin-theme-ui. And then inside of that we get access to its whole source folder.

[00:00:42] So theme UI is set up where they put the theme just at the root so we can do index.js. And to set up a style object we just export an object. And there are some keys. There's a whole Theme UI spec that we can look at on theme-ui.com.

[00:01:02] I'm not gonna get deep into this, but if we look at the spec we can see that there are colors, fonts, font sizes, a whole bunch of things that you can set. And if you follow this spec the nice thing about it is that any theme following the Theme UI spec will respect these settings.

[00:01:19] So if I set a primary color any site using Theme UI will respect that primary color. And so if my site exports a theme object all of the themes using Theme UI that are installed on my site will pick up the settings from my Theme UI object without me having to change anything in the themes themselves.

[00:01:38] So this is really, really handy for us. And I'm just gonna set up some colors to start. So let's set up a primary color, we’ll make it rebeccapurple because this is a Gatsby site and Gatsby uses rebeccapurple as a brand color. We’ll do secondary of indigo, we can set up a muted color of gray, a text color of purple and a.

[00:02:10]
>> Jason Lengstorf: Background of white. And that’s good enough to get us started. So let's just start the site here. We'll do yarn workspace theme-dev develop.
>> Jason Lengstorf: And once this gets up and running we can see that it picked up our colors.