Huy's Notes
Gatsby - Theme Shadowing

Gatsby - Theme Shadowing

#gatsby #ui


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


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.

Referred in

If you think this note resonated, be it positive or negative, please feel free to send me an email and we can talk.