How can I apply styles to all Mantine components?

Last updated December 7, 2024

Attribute selector

All Mantine components have static classes that start with mantine- prefix. Use attribute selector in .css file to apply styles to all Mantine components:

[class^=mantine] {
  color: red;
}

Note that if you change classNamesPrefix on MantineProvider:

import { MantineProvider, Text } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider classNamesPrefix="app">
      <Text>Just some text</Text>
    </MantineProvider>
  );
}

You will need to update selector to match new prefix:

[class^=app] {
  color: red;
}