Outline
Let's set up styled-components.
First, stop the development server (usually ctrl-C).
Next, run the following command to install styled-components:
npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components
This will install styled-components, a companion Babel plugin, and a Gatsby plugin so we can use styled-components in Gatsby.
We now need to tell Gatsby to use styled-components. We do this in gatsby-config.js located at the root of the project. Right now, our config file is mostly empty. Inside of module.exports, add a plugins array with gatsby-plugin-styled-components:
// gatsby-config.js
module.exports = {
plugins: [`gatsby-plugin-styled-components`],
}
And that's it! We're now ready to start using styled-components. We'll do that in the next video.
P.S. If you're wondering why Gatsby prefers to use template literals (the backticks) instead of strings almost everywhere, here is a great article by Nicolás Bevacqua that explains why.