Styling

MindDrop UI are styled using plain old CSS files. This makes themeing and customization a breeze.

All components have a root class name and prop based class names. For instance, the Button component has a root class of button and prop based classes such as size-large, variant-contained, disabled.

A large, primary-colored, contained button which is disabled would have the following class name: button size-large color-primary variant-contained disabled.

See the mapPropsToClasses function for more details on prop based classes.

All components and their parts accept a className prop. This class will be passed through to the DOM element. You can use it in CSS as expected.

When components are stateful, their state will be exposed in a data-state attribute. For example, when an Accordion Item is opened, it includes a data-state="open" attribute.

You can style a component state by targeting its data-state attribute.

.accordion-item {
border-bottom: 1px solid gainsboro;
}
.accordion-item[data-state='open'] {
border-bottom-width: 2px;
}

MindDrop UI were designed to encapsulate accessibility concerns and other complex functionalities, while ensuring you retain complete control over styling.

For convenience, stateful components include a data-state attribute.