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
root
folder 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.js
with 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.js
file and add the following:import...