Skip to content
Theme UI
GitHub

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) => (
<Global
styles={(theme) => ({
'*': {
boxSizing: 'border-box',
},
})}
/>
)
Edit the page on GitHub
Previous:
Color Mode Toggles
Next:
TypeScript