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.