Global customization

Global customization is when we customize all instances of a given Mantine's component.

implement a specific global Mantine class

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.