DEV Community

loading...

Discussion on: Gatsby theme shadowing for beginners: How I built a starter for LekoArts’ Minimal Blog theme

Collapse
lestgabo profile image
Lestley Gabo • Edited

Thanks! This was helpful. I got confused how to import from shadow because the Gatsby documentation was misleading.
Here gatsbyjs.com/docs/themes/shadowing... it says

In this case, the file to shadow is gatsby-theme-blog/src/components/bio.js.

The shadowing API uses a deterministic file structure to determine which 
component will be rendered. In order to override the Bio component in 
gatsby-theme-blog, create a file named
user-site/src/gatsby-theme-blog/components/bio.js.

Any file that lives in the src/gatsby-theme-blog directory of the user’s site
will be used instead of a file with the same name located in the theme’s
src directory: gatsby-theme-blog/src. This replaces the entire file:
to re-use parts of the original file from the theme such as functionality
or styling, check out the sections of this doc on extending 
and importing shadowed files.

This means that user-site/src/gatsby-theme-blog/components/bio.js will  
be rendered in place of gatsby-theme-blog/src/components/bio.js:

It says to create a file named user-site/src/gatsby-theme-blog/components/bio.js. But it should be user-site/gatsby-theme-blog/src/components/bio.js instead or at least just make sure the path to the node_module is correct. In which case, your blog implemented the shadow importing correctly and with an example. Nice!