How can I apply styles to all Mantine components?

Attribute selector

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

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

Note that if you change the 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 the selector to match the new prefix:

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