#11

Shadowing Gatsby Themes

2019-08-21

TAGS: gatsby

I'm adding Gatsby-Theme-Notes to my personal site and had trouble wrapping it in my site's layout component.

I found Chris Bascardi's blog post on Layouts in Gatsby Themes but it didn't specifically say how to wrap the theme in my layout component.

I did some digging and watched Jason Lengstorf and Brent Jackson go through a theme. Turns out they needed to shadow the Gatsby theme they were using.

We do this by creating a folder in our project that's named the same as the folder in the theme. Whatever files or components we want to overwrite we include in that folder.

It's kind of like using the spread operator to overwrite a property.

const newFirstName = "Sarah";
const newUser = { ...oldUser, firstName: newFirstName };

Anything that's in the theme's src folder we can shadow.

The theme's file structure looks like this:

📦 gatsby-theme-notes
 ┣ 📂src
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📜breadcrumb-divider.js
 ┃ ┃ ┣ 📜breadcrumb-home.js
 ┃ ┃ ┣ 📜breadcrumbs.js
 ┃ ┃ ┣ 📜directory-list.js
 ┃ ┃ ┣ 📜file-list.js
 ┃ ┃ ┣ 📜footer.js
 ┃ ┃ ┣ 📜layout.js
 ┃ ┃ ┣ 📜note.js
 ┃ ┃ ┗ 📜notes.js
 ┃ ┣ 📂gatsby-plugin-theme-ui
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂templates
 ┃ ┃ ┣ 📜note.js
 ┃ ┃ ┗ 📜notes.js
 ┃ ┣ 📜use-options.js
 ┃ ┗ 📜use-site-metadata.js
 ┣ 📜README.md
 ┣ 📜gatsby-config.js
 ┣ 📜gatsby-node.js
 ┣ 📜index.js
 ┗ 📜package.json

So to shadow the layout component, my file structure looks like this:

📦src
 ┣ 📂gatsby-theme-notes
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📜layout.js

Gatsby will use my layout component in place of the Theme's, but keep the rest of the theme's files. This lets me get updates to the project when they come in, as I'm only editing the one layout.js.