Gatsby - Theme Shadowing

#gatsby #ui

Read: https://www.gatsbyjs.org/docs/themes/shadowing/

This is a very interesting technique in [Gatsby] that helps you ~not so~ easily modify a source from theme or a plugin.

How?

For example, if we have a theme named gatsby-theme-foo, and a project named user-blog. We want to modify the source file gatsby-theme-foo/src/components/Foo.js.

What we need to do is create a file user-blog/src/gatsby-theme-foo/components/Foo.js. And rewrite whatever in the original Foo.js here, plus some modification as we wanted.

Noted that the shadowing path won't have the src as it is in the original theme.

Dealing with import

If in the source file, we have an import statement like:

import { Bar } from './Bar';

You will need to change it in show shadowing file, like this:

import { Bar } from 'gatsby-theme-foo/src/components/Bar';

Shadowing is monkey patching

Although it's helpful, it's violated the most important maintenable rule:

Never monkey patching files that not owned by your project

If the amount of shadowing works is reasonable, it's ok, but if there's a lot of stuff to be shadowing, you better fork the theme you're using and modify it instead.