MantineProvider

MantineProvider component can be used to change theme. It is not required if you decide to use the default theme.

Usage

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

function App() {
  return <Button>My app button</Button>;
}

// Custom theme is applied to all components in App
function Demo() {
  return (
    <MantineProvider theme={{ fontFamily: 'Open Sans' }} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

CSS reset and global styles

MantineProvider has an option to add css reset similar to normalize.css (withNormalizeCSS) and global styles (withGlobalStyles). It is recommended to enable these options.

withGlobalStyles prop will add the following styles:

• background-color to theme.colors.dark[7] in dark color scheme and theme.white in light
• color to theme.colors.dark[0] in dark color scheme and theme.black in light
• font-family and font-smoothing based on theme
• font-size to theme.fontSizes.md

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

function Demo() {
  return (
    <MantineProvider withNormalizeCSS withGlobalStyles>
      <App />
    </MantineProvider>
  );
}

CSS variables

If you prefer to style components with CSS/SCSS or other styling solutions that do not have access to Mantine theme context, then you can use Mantine CSS variables. To add CSS variables to the :root set withCSSVariables prop on MantineProvider:

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

function Demo() {
  return (
    <MantineProvider withCSSVariables withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Then you will be able to use variables anywhere in your CSS:

.my-button {
  background-color: var(--mantine-color-blue-6);
  font-family: var(--mantine-font-family);
  line-height: var(--mantine-line-height);
}

Mantine exposes the following CSS variables based on theme you provide:

• --mantine-color-white
• --mantine-color-black
• --mantine-transition-timing-function
• --mantine-line-height
• --mantine-font-family
• --mantine-font-family-monospace
• --mantine-font-family-headings
• --mantine-heading-font-weight
• --mantine-shadow-{size}, e.g. --mantine-shadow-sm, --mantine-shadow-xl
• --mantine-radius-{size}, e.g. --mantine-radius-sm, --mantine-radius-xl
• --mantine-spacing-{size}, e.g. --mantine-spacing-sm, --mantine-spacing-xl
• --mantine-font-size-{size}, e.g. --mantine-font-size-sm, --mantine-font-size-xl
• --mantine-color-{color}-{shade}, e.g. --mantine-color-blue-6, --mantine-color-gray-0
• --mantine-{heading}-font-size, e.g. --mantine-h1-font-size
• --mantine-{heading}-line-height, e.g, --mantine-h3-line-height

Nested MantineProviders

If some parts of your application require different theme settings, you can wrap them with another MantineProvider:

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

function Demo() {
  return (
    <MantineProvider theme={{ fontFamily: 'Georgia, serif' }}>
      <Text align="center" mb="xs">Georgia or serif text</Text>

      <MantineProvider theme={{ fontFamily: 'Greycliff CF, sans-serif' }}>
        <Button>Greycliff CF button</Button>
      </MantineProvider>
    </MantineProvider>
  );
}

Note that nested MantineProvider will inherit theme override from parent provider only if inherit prop is set:

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

function App() {
  return (
    // Parent MantineProvider
    <MantineProvider withGlobalStyles withNormalizeCSS theme={{ colorScheme: 'dark' }}>
      <Button>Affected only by parent provider</Button>
      {/*
        Child MantineProvider, inherits theme from parent MantineProvider.
        Other properties specified on child provider will override parent props.
        For example, in this case theme override will be:
        { colorScheme: 'dark', primaryColor: 'red' }
      */}
      <MantineProvider theme={{ primaryColor: 'red' }} inherit>
        <Button>Affected only by child provider</Button>
      </MantineProvider>
    </MantineProvider>
  );
}

Styles on MantineProvider

You can add context styles to components that support Styles API with MantineProvider. All components that are rendered inside MantineProvider will inherit those styles:

import { MantineProvider, Button, Badge, ButtonStylesParams } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            // Subscribe to theme and component params
            styles: (theme, params: ButtonStylesParams) => ({
              root: {
                height: 42,
                padding: '0 30px',
                backgroundColor:
                  params.variant === 'filled'
                    ? theme.colors[params.color || theme.primaryColor][9]
                    : undefined,
              },
            }),
          },

          Badge: {
            // Use raw styles object if you do not need theme dependency
            styles: {
              root: { borderWidth: 2 },
            },
          },
        },
      }}
    >
      <Button variant="outline">Outline button</Button>
      <Button variant="filled" color="cyan">Filled button</Button>
      <Badge variant="dot">Dot badge</Badge>
    </MantineProvider>
  );
}

If component does not specify Styles API selectors, then in most cases you can add styles using root selector:

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

function App() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        components: {
          Text: {
            styles: {
              root: { fontSize: 20 },
            },
          },
        },
      }}
    >
      <Text>20px text</Text>
    </MantineProvider>
  );
}

Classes on MantineProvider

Same as with styles you can add classes to all components with classNames. This approach is useful when you want to styles components with utility based CSS libraries.

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

function App() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        components: {
          Button: {
            classNames: { root: 'button-root', label: 'button-label' },
          },
        },
      }}
    >
      <Button>All Button components will have the classes above</Button>
    </MantineProvider>
  );
}