This gives you fine-grained control of all functionality, content, and styling that a theme provides. The shadowing API isn’t restricted to React components you can override any JavaScript, Markdown, MDX, or CSS file in the src directory. Which will result in the following directory tree: Any source file is shadowable Note that any styles in shadowed files will automatically get deep-merged with your preset theme. For conflicting styles, your local shadowed settings take precedence. The styles in this file will be automatically merged with those in gatsby-theme-ui-preset. Shadowing is one way to customize the styling of a theme.įor example, to shadow index.js from gatsby-plugin-theme-ui, create a file named user-site/src/gatsby-plugin-theme-ui/index.js. gatsby-theme-blog uses gatsby-plugin-theme-ui with the gatsby-theme-ui-preset preset. Some themes, including gatsby-theme-blog, install additional plugins. 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:Ī successful shadow of the Bio component will result in the following directory tree: Shadowing other files 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. In order to override the Bio component in gatsby-theme-blog, create a file named user-site/src/gatsby-theme-blog/components/bio.js.Īny 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. The shadowing API uses a deterministic file structure to determine which component will be rendered. In this case, the file to shadow is gatsby-theme-blog/src/components/bio.js. You can inspect gatsby-theme-blog’s file structure to determine the file path for the file you want to shadow. If you’d like to change the Bio component you can do so with the shadowing API. If you’ve installed gatsby-theme-blog you’ll notice that it renders a Bio component which is used in the BlogPost template. Shadowing lets you replace the theme’s original file, gatsby-theme-blog/src/components/bio.js, with your own file to make any changes you need. css) in your site.Ī practical use case is when you’ve installed gatsby-theme-blog and want to customize the author Bio component to add your own biographical content. This works for React components, pages in src/pages, JSON files, TypeScript files, as well as any other imported file (such as. This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation. Gatsby themes introduce a concept called “shadowing”.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |