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