K

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>
);
}
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback