Emotion

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 renderToString or 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 gatsby-config.js:

Then in your terminal run npm start to start the Gatsby development server.

Now create a sample Emotion page at src/pages/index.js:

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:

Create gatsby-config.js and add the Emotion plugin:

Next, add a layout component at src/components/layout.js:

Then, update src/pages/index.js to use the layout:

Run npm run build, and you can see in public/index.html that the styles have been inlined globally.