Skip to Content

Global Styles

GlobalStyle is a new component in v1 that injects styles defined in 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, 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.

Default styles#

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

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.

Community examples#

To help you better understand this concept, here are links to community projects that use custom global styles.

  • Gatsby Starter i18n
Edit this page