Setup Styled Components

Styled Components is visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

This recipe:

---

Installs necessary NPM packages.

<NPMPackage name="gatsby-plugin-styled-components" /> <NPMPackage name="styled-components" /> <NPMPackage name="babel-plugin-styled-components" />

---

Installs the Styled Components plugin in gatsby-config.js.

<GatsbyPlugin name="gatsby-plugin-styled-components" />

---

Writes out an example page you can use to play with Styled Components.

<File path="src/pages/styled-components-example.js" content="https://gist.githubusercontent.com/KyleAMathews/34541b87c4194ba2290eedbe8a0b1fe0/raw/dba4d3ffecb5f2a3a36e0e017387185a9835c685/styled-components-example.js" />

---

Read more about Styled Components on the official docs site:

https://styled-components.com/