Request for className hook for customizing theme

At present, for using a custom theme, we have to use many complex CSS selectors around flexbox-fix and its accidents div. e.g.

```less
.flexbox-fix {
align-items: center;

div {
border-radius: 20px !important;

&:last-child {
margin-top: 0 !important;
}
}

> div:first-child {
> div {
overflow: visible !important;

&:nth-child(2) {
margin-top: 10px !important;
}

> div {
> div {
> div {
> div {
width: 9px !important;
height: 9px !important;
background-color: transparent !important;
border: 2px solid #fff;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}
}
}
}
}
}

&:last-child {
margin: 10px 0 !important;
padding: 0 !important;
border-top: none !important;

> div {
width: 20px !important;
height: 20px !important;
margin: 0 10px 10px 0 !important;
}
}
}

```

Can we have a more stable, semantic and simple way to do this?

Start by locating the component that renders the flexbox-fix and nested picker elements described in the issue. Review its existing styling and customization API, then define stable className hooks that replace the fragile selectors. Check the relevant component tests, if present, and verify that custom themes can target the new hooks without depending on nested structure.

Written by the indexing model from the issue text.