Skip to content
Theme UI

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 <html> element. It will also apply color and background-color styles based on theme.colors.text and theme.colors.background respectively.

import { Global } from '@emotion/react'
export default (props) => (
styles={(theme) => ({
'*': {
boxSizing: 'border-box',
Edit the page on GitHub
Color Mode Toggles
Linked Headings