Ben Borgers / Posts /

How to add global CSS to Gatsby with Emotion

January 24, 2021 by @benborgers

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.

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!

Loading...