Setup Emotion
Emotion (https://emotion.sh/) 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 f
ile.
Step 1 / 4
Install necessary NPM packages
Proposed changes
NPMPackage:
* Install gatsby-plugin-emotion@latest
NPMPackage:
* Install @emotion/core@latest
NPMPackage:
* Install @emotion/styled@latest
Step 1
Install necessary NPM packages
✅ Installed NPM package [email protected]
✅ Installed NPM package @emotion/[email protected]
✅ Installed NPM package @emotion/[email protected]
Step 2 / 4
Install the Emotion plugin in gatsby-config.js
Proposed changes
GatsbyPlugin:
* Install gatsby-plugin-emotion in gatsby-config.js
---
Compared values have no visual difference.
---
Step 3 / 4
Sweet, now it's ready to go.
Let's also write out an example page you can use to play with Emotion.
Proposed changes
File:
* Write src/pages/emotion-example.js
---
- Original - 0
+ Modified + 14
+ import React from "react"
+
+ export default () => (
+ <div
+ css={{
+ backgroundColor: 'hotpink',
+ '&:hover': {
+ color: 'lightgreen'
+ }
+ }}
+ >
+ This has a hotpink background.
+ </div>
+ )
---
Step 3
Sweet, now it's ready to go.
Let's also write out an example page you can use to play with Emotion.
✅ Wrote file src/pages/emotion-example.js
Step 4 / 4
Read more about Emotion on the official Emotion docs site:
https://emotion.sh/docs/introduction (https://emotion.sh/docs/introduction)
--
The recipe finished successfully!
✅ Installed NPM package [email protected]
✅ Installed NPM package @emotion/[email protected]
✅ Installed NPM package @emotion/[email protected]
✅ Installed gatsby-plugin-emotion in gatsby-config.js
✅ Wrote file src/pages/emotion-example.js