Nested Overrides Playground

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 () => (
  <Tag
    overrides={{
      Text: {
        style: ({$theme}) => ({
          color: $theme.colors.accent,
        }),
      },
    }}
  >
    this is a tag
  </Tag>
);

and the tag will have accented 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)

import * as React from "react";
import { Tag } from "baseui/tag";
export default () => {
  return (
    <Tag
      overrides={{
        Text: {
          style: ({ $theme }) => ({
            color: $theme.colors.accent
          })
        }
      }}
    >
      this is a tag
    </Tag>
  );
}

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:

<Select
  overrides={{
    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:

import * as React from "react";
import { Select } from "baseui/select";
export default () => {
  const [value, setValue] = React.useState([
    { label: "Atlanta", id: "a" }
  ]);
  return (
    <Select
      options={[
        { label: "Atlanta", id: "a" },
        { label: "Baltimore", id: "b" },
        { label: "Chicago", id: "c" },
        { label: "Denver", id: "d" }
      ]}
      value={value}
      multi
      placeholder="Select color"
      onChange={params => setValue(params.value)}
      overrides={{
        Tag: {
          props: {
            overrides: {
              Root: {
                style: ({ $theme }) => ({
                  borderTopLeftRadius: 0,
                  borderTopRightRadius: 0,
                  borderBottomRightRadius: 0,
                  borderBottomLeftRadius: 0,
                  backgroundColor: $theme.colors.accent
                })
              }
            }
          }
        }
      }}
    />
  );
}

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.