Ben Borgers

How to add global CSS to Gatsby with Emotion

April 2, 2020

By default, CSS you add with Emotion is scoped to the component where it was added.

To add global CSS, use the Global component provided by Emotion:

import React from "react"
import { css, Global } from "@emotion/core"

export default () => {
  return (
        * {
          font-family: Helvetica, sans-serif;

The CSS written in the styles prop of Global will be injected globally into your Gatsby site.

Subscribe to my newsletter!

A weekly round-up of new blog posts and updates to projects I’m working on.