Global styles on theme

The best way to add global styles is theme.globalStyles, this way you will be able to share these styles between different environments (for example, Next.js application and Storybook):

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


function Demo() {
  return (
    <MantineProvider
      theme={{
        globalStyles: (theme) => ({
          '*, *::before, *::after': {
            boxSizing: 'border-box',
          },


          body: {
            ...theme.fn.fontStyles(),
            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
            color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
            lineHeight: theme.lineHeight,
          },


          '.your-class': {
            backgroundColor: 'red',
          },


          '#your-id > [data-active]': {
            backgroundColor: 'pink',
          },
        }),
      }}
    >
      <App />
    </MantineProvider>
  );
}

Global component

Global component is an alternative the theme.globalStyles. styles prop accepts:

  • function that subscribes to theme and returns css object or an array of css objects
  • css object or an array of css objects
import { Global } from '@mantine/core';


function Demo() {
  return (
    <Global
      styles={(theme) => ({
        '*, *::before, *::after': {
          boxSizing: 'border-box',
        },


        body: {
          ...theme.fn.fontStyles(),
          backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
          lineHeight: theme.lineHeight,
        },


        '.your-class': {
          backgroundColor: 'red',
        },


        '#your-id > [data-active]': {
          backgroundColor: 'pink',
        },
      })}
    />
  );
}

Where to render Global

Usually global styles depend on theme, you can render Global component anywhere within MantineProvider:

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


function MyGlobalStyles() {
  return (
    <Global
      styles={(theme) => ({
        '*, *::before, *::after': { boxSizing: 'border-box' },
        // ...other global styles
      })}
    />
  );
}


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

Load fonts

To load use array syntax. The following example shows how Mantine docs website loads GreycliffCF font:

import { Global } from '@mantine/core';
import bold from './GreycliffCF-Bold.woff2';
import heavy from './GreycliffCF-Heavy.woff2';


function Demo() {
  return (
    <Global
      styles={[
        {
          '@font-face': {
            fontFamily: 'Greycliff CF',
            src: `url('${bold}') format("woff2")`,
            fontWeight: 700,
            fontStyle: 'normal',
          },
        },
        {
          '@font-face': {
            fontFamily: 'Greycliff CF',
            src: `url('${heavy}') format("woff2")`,
            fontWeight: 900,
            fontStyle: 'normal',
          },
        },
      ]}
    />
  );
}
Go back
createStyles – Styles
Up next
Responsive styles – Styles
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter