Styling with styled-components
In this section, we will learn how to implement Styled Components as a styling tool in our Gatsby project:
- Open a terminal at the
rootfolder of your project and run to install your dependencies:npm install gatsby-plugin-styled-components styled- components babel-plugin-styled-components
These are the details of the dependencies:
styled-components: The Styled Components librarygatsby-plugin-styled-components: The official Gatsby plugin for Styled Componentsbabel-plugin-styled-components: Provides consistently hashed class names between builds
- Update your
gatsby-config.jswith the following:module.exports = { plugins: ['gatsby-plugin-styled-components'], }This instructs Gatsby to use the Styled Components plugin that we just installed.
We can have all the pieces in place to create styles on a page/component level and a global level.
- To demonstrate utilizing them, navigate to your
pages/index.jsfile and add the following:import...