Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use Component Shadowing to Override Gatsby Theme Components

    Jason LengstorfJason Lengstorf

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: 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.

    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.

    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.

    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.

    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.

    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.