Setup Emotion

Emotion is a powerful CSS-in-JS library that supports both inline CSS styles and styled components. You can use each styling feature individually or together in the same file.

This recipe:

---

Installs necessary NPM packages.

<NPMPackage name="gatsby-plugin-emotion" /> <NPMPackage name="@emotion/react" /> <NPMPackage name="@emotion/styled" />

---

Installs the Emotion plugin in gatsby-config.js

<GatsbyPlugin name="gatsby-plugin-emotion" />

---

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

<File path="src/pages/emotion-example.js" content="https://gist.githubusercontent.com/KyleAMathews/323bacd551df46e8e7b6146cbf827d0b/raw/5c60f168f30c505cff1ff2433e69dabe27ae9738/sample-emotion.js" />

---

Read more about Emotion on the official Emotion docs site:

https://emotion.sh/docs/introduction