In this guide, you will learn how to set up a site with the CSS-in-JS library Emotion.
Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
Server side rendering works out of the box in Emotion. You can use React’s
renderToNodeStream methods directly without any extra configuration.
extractCritical feature removes unused rules that were created with emotion and helps loading pages faster.
First, open a new terminal window and run the following to create a new site:
Second, install the necessary dependencies for Emotion and Gatsby.
And then add the plugin to your site’s
Then in your terminal run
npm start to start the Gatsby development server.
Now create a sample Emotion page at
Adding global styles in Gatsby with Emotion
To start, create a new Gatsby site with the hello world starter and install
gatsby-plugin-emotion and its dependencies:
gatsby-config.js and add the Emotion plugin:
Next, add a layout component at
src/pages/index.js to use the layout:
npm run build, and you can see in
public/index.html that the styles have been inlined globally.