Global customization

Global customization, or theming, is when we set some style that will affect all instances of a given component.

implement a class that lives on all instances of a component.

Mantine applies some classes on all instances of a given Component. We may implement such classes to affect all instances.

For example, mantine-Button-root is applied on instances' root component, while mantine-Button-label is applied on instances' label component.

.mantine-Button-root {
    border-width: 0.5px; /* influences all Button instances */
}

The empty classes have the same priority as classes used by Mantine to provide its style. To give more priority to the classes we implement, we must implement them in a stylesheet with higher priority. That is, we import our stylesheet after Mantine's.

set style primitives in the global theme

#todo