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.

  • 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 providers some sensible global styles. Here's what it looks like:

The mode(...) 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.

Custom global style examples#

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

  • Gatsby Starter i18n
Edit this page