Apply Styles To All

import { Layout } from '@/layout';

export const meta = { title: 'How can I apply styles to all Mantine components?', description: 'Learn how to use attribute selector to apply styles to all Mantine components', slug: 'apply-styles-to-all', category: 'styles', tags: ['selector', 'classnames', 'styles'], created_at: 'December 7, 2024', last_updated_at: 'December 7, 2024', };

export default Layout(meta);

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;
}