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 (
<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.
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.