Global styles

Mantine components do not depend on any global styles, however to help you build your own components @mantine/core exports GlobalStyles and NormalizeCSS components.

NormalizeCSS

NormalizeCSS adds normalize.css global styles with normalize-jss, to use it add NormalizeCSS component at any place of your application:

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

function Demo() {
  return (
    <MantineProvider>
      <NormalizeCSS />
      <YourApp />
    </MantineProvider>
  );
}

GlobalStyles

GlobalStyles component will help you work with dark color scheme, it sets body 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

GlobalStyles must be included only once and rendered inside MantineProvider:

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

function Demo() {
  return (
    <MantineProvider>
      <GlobalStyles />
      <YourApp />
    </MantineProvider>
  );
}