Global overrides

Global overrides, also called theming, can be done by:

• overriding a component, affecting all instances across the app:

  • We implement component-scoped pre-defined classes, such as mantine-Button-root.

• overriding style-primitives, affecting all components that depend on it:

  • We edit theme properties in createTheme({})
  • or we edit Mantine's CSS variables directly

set theme properties

We create a custom theme. For example, we control font weights across the app with fontWeights. Under the hood, it sets the --mantine-font-weight-xxx CSS variables:

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

set CSS variables directly

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

implement component-scoped empty classes

Mantine adds empty classes to its components' inner-elements (including root). By implementing them, we override those inner-elements globally.

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

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

component-scoped empty classes specificity

Empty classes have the same specificity than Mantine's internal classes. As such, we implement overrides in a stylesheet than we import after Mantine's one.