How to add global CSS to Gatsby with Emotion

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 (
    <Global
      styles={css`
        * {
          font-family: Helvetica, sans-serif;
        }
      `}
    />
  )
}

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