By default, all Chakra components inherit values from the default theme. In some scenarios, you might need to customize the default theme to match your design requirements, you have a few different options depending on your goals.
To extend or override a token in the default theme, import the extendTheme
function and add the keys you'd like to override. You can also add new values to
the theme.
For example, if you'd like to update the colors in the theme to include your brand colors, here's what you'll do:
If you're curious what theme styles you can override, please reference the default theme foundation style files.
Chakra has a specific approach or API for styling components. The main idea is
most components have default or base styles (baseStyle
), styles for different
sizes (sizes
), and styles for different visual variants (variants
).
It's important to understand this so you can override any component style effectively.
You're not limited to the component styles that Chakra providers, you can also create your custom component styles. Learn more.
As we mentioned earlier, a component style consists of baseStyles
, sizes
,
variants
and an optional defaultProps
to denote the default size
or
variant
.
Here's what the component style object looks like:
For example, let's override the component styles for Chakra's Button component.
And that's it! When you use the Button from Chakra, these updates will be automatically applied.
If you're curious what component styles you can override, please reference the default component style files.
Global styles are theme-aware styles you can applied to any html element globally.
To add global styles, update the theme.styles.global
key in the theme. Global
styles can be a style object or a function that returns a style object.
As your project grows in size, it's best to keep things organized. We highly
suggest that instead of a single theme.js
(or theme.ts
) file, that you
create a /theme
folder in its place. Inside of this folder, you could have a
directory structure that looks like such:
This way, you can structure your main theme entrypoint file to be much cleaner, like this:
None of this is strictly required to use Chakra - but we've learned some hard lessons on the "right" way and the "wrong" way to write styles. The above is our best suggestion on how to write style overrides and organize your custom theme.
In the next section, we'll show some examples of how to create custom component styles and use them in your components!