Global Styles

GlobalStyle is a new component in v1 that injects styles defined in theme.styles.global into the global styles of your app or website.

This allows you define theme-aware styles for any elements.

How it works#

By using ChakraProvider at the root of your application, we automatically render a GlobalStyle component. Here's what GlobalStyle does under the hood:

  • Reads the styles defined in theme.styles.global, this style can be a style object or a function that returns a style object.
  • Process the styles and pass it to emotion's Global component which is used to handle global style injection.
// 1. Using a style object
const theme = {
styles: {
global: {
'html, body': {
color: 'gray.600',
lineHeight: 'tall',
},
a: {
color: 'teal.500',
},
},
},
}
// 2. Using a function
// NB: Chakra gives you access to `colorMode` and `theme` in `props`
const theme = {
styles: {
global: (props) => ({
'html, body': {
fontSize: 'sm',
color: props.colorMode === 'dark' ? 'white' : 'gray.600',
lineHeight: 'tall',
},
a: {
color: props.colorMode === 'dark' ? 'teal.300' : 'teal.500',
},
}),
},
}

Default styles#

The default Chakra theme provides sensible global styles. Here's what it looks like:

import { mode } from '@chakra-ui/theme-tools'
const styles = {
global: (props) => ({
body: {
fontFamily: 'body',
color: mode('gray.800', 'whiteAlpha.900')(props),
bg: mode('white', 'gray.800')(props),
lineHeight: 'base',
},
'*::placeholder': {
color: mode('gray.400', 'whiteAlpha.400')(props),
},
'*, *::before, &::after': {
borderColor: mode('gray.200', 'whiteAlpha.300')(props),
wordWrap: 'break-word',
},
}),
}

Note 🚨: mode(lightMode, darkMode)(props) function is the same as props.colorMode === "dark" ? darkMode : lightMode

Styling non-Chakra elements globally#

When combining Chakra with other libraries, you might need a way to style some elements in those libraries using the theme defined tokens.

Let's say you have a blog written in mdx and you'd like to style all the MDX elements globally. Here's what you'll do.

// 1. Wrap the rendered mdx in a container
const MDXWrapper = (props) => <div className='mdx-prose' {...props} />
// 2. Define global styles
// PRO TIP: Again, you can also use the function version here
const theme = {
styles: {
global: {
'.mdx-prose': {
h1: {
fontSize: 'xl',
mb: '4',
},
p: {
fontSize: 'sm',
lineHeight: '1.4',
},
},
},
},
}
// 3. That's it! Your app will now read and use the global styles

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel