Global customization

Global customization, also called theming, overrides style-primitives, affecting several components as side-effects, or, with a more precise reach, overrides one more specific component to affect all instances.

We customize style primitives by setting the theme or by setting CSS variables. Setting the theme ultimately sets CSS variables

customize style primitives with the theme

For example, we set the value of --mantine-font-weight-medium for the whole app through fontWeights.medium:

const theme = createTheme({
    fontWeights: {
        medium: "500",
    },
})

customize style primitives with CSS variables

:root {
    --mantine-font-weight-medium: 500;
}

override Mantine components with component-scoped empty classes

Mantine adds a series of empty classes on all components. We can implement them to customize a given aspect of that component. (Implementing such classes affects all instances)

For example, Mantine adds mantine-Button-root to the Button's root element and mantine-Button-label on the label inner-element. We implement the class if needed:

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

empty classes specificity

Mantine empty classes have the same specificity than Mantine's internal classes. As such, we make sure to import our stylesheet after Mantine's one.