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.


I finished! On to the next chapter