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.
ChakraProvider at the root of your application, we automatically
GlobalStyle component. Here's what
GlobalStyle does under the hood:
theme.styles.global, this style can be a style object or a function that returns a style object.
Globalcomponent which is used to handle global style injection.
The default Chakra theme provides sensible global styles. Here's what it looks like:
mode(lightMode, darkMode)(props)function is the same as
props.colorMode === "dark" ? darkMode : lightMode
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.
To help you better understand this concept, here are links to community projects that use custom global styles.