Global customization

Global customization, also called theming, aims to override style at the style-primitives level (affecting several components), or at the component level, affecting all instances.

customize style primitives

#todo

implement Mantine-provided, component-scoped empty classes

Mantine sticks a series of empty classes on each of its built-in components. We may implement them to customize a given aspect of a given component.

(Implementing such class affects all instances)

For example, Mantine sticks mantine-Button-root and mantine-Button-label on inner-elements of the Button component.

.mantine-Button-root {
    border-width: 0.5px;
}

empty classes specificity

Those classes have the same specificity than Mantine's implemented internal classes. One technique to make them win is to import our stylesheet after Mantine's one.