Global Styles

Use the Emotion Global component to add global CSS with theme-based values.

By default, the ThemeProvider component will apply styles in theme.styles.root to the <body> element. It will also apply color and background-color styles based on theme.colors.text and theme.colors.background respectively.

import React from 'react'
import { Global } from '@emotion/core'
export default props =>
  <Global
    styles={theme => ({
      '*': {
        boxSizing: 'border-box',
      }
    })}
  />

Edit the page on GitHub

Color Mode Toggles

Linked Headings