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

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