global-styles.mdx

group	title	slug	order	search
styles	Global styles	/styles/global-styles/	2	Global styles with emotion, @font-face

Global component

To set global styles use Global component. 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

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',
          },
        },
      ]}
    />
  );
}