Nested Overrides Playground
Complex components are easier to customize.
One of the most unique aspects of Base Web components is that you can fully customize every single part of them through overrides. If you are not familiar with this important concept, you can learn more in our guide.
Here's TLDR: Every component has the overrides
prop that maps sub-components to custom styles, props or even entire components. For example, if you want to change the default color of tag you can do this:
import * as React from 'react';import {Tag} from 'baseui/tag';export default () => (<Tagoverrides={{Text: {style: ({$theme}) => ({color: $theme.colors.accent,}),},}}>this is a tag</Tag>);
and the tag will have accent
ed label:
How can you tell that Text
is the right override that targets the tag's content? You can see all available overrides by using static types or study the API cheat sheet. But that's not always convenient and you still have to guess what each override actually maps too.
Playground
That's where the interactive playground at the top of each component page can greately help! (powered by react-view)
Additionally, you can fully customize any part of the Tag component through the overrides prop (learn more). Try to update different style overrides in the explorer bellow:
- Root
- Action
- ActionIcon
- Text
Once you open the Style Overrides
tab, you see the list of all available override identifiers. You can toggle them to visually highlight the related component part and change its styles as needed. At the same time, the code snippet is automatically updated so you can copy&paste the resulting output into your project without typing a single line of code.
Nested Overrides
Most of our compontents represent basic UI pieces: buttons, links, inputs or tags. However, some are more complex like Date Picker or Select. They provide a rich functionality and compose other existing Base Web components. We say that they have nested components. For example, Select nests these components:
- Icon
- Spinner
- Popover
- Tag
So what if you want to customize Tag's color and corners as a part of the multivalue Select? That's where things get a bit tricky. Again, we go in depth in our guide. Here's the glimpse of nested overrides logic:
<Selectoverrides={{Tag: {props: {overrides: {// pass "nested" overrides to the inner "Tag" component},},},}}/>
While this recursive structure should be logical if you fully understand the concept of overrides, it might be a head scratcher at the beginning. We also did not provide a good individualized documentation for each instance when nested overrides are needed.
This changes today! Our interactive playground now fully supports nested overrides and gets recursive when neccessary. This is a simplified playground for the Select component demonstrating the nested Tag style override:
Additionally, you can fully customize any part of the Select component through the overrides prop (learn more). Try to update different style overrides in the explorer bellow:
- Root
- DropdownListItem
- Placeholder
- Tagnested
- Root
- Action
- ActionIcon
- Text
- ValueContainer
We have revisited all our components to properly document and represent all nested overrides. We know this has been a source of frustration for many. Hopefully, this will ease any struggles when customizing even the most complex Base Web components.