import { StylesDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.GlobalStyles);

Global styles

The @mantine/core package includes some global styles that are required for components to work correctly. If you override these styles, some components might not work as expected.

Global styles are automatically imported with:

tsx

import '@mantine/core/styles.css';

If you want to import styles per component, you need to import all global styles manually:

tsx

import '@mantine/core/styles/baseline.css';
import '@mantine/core/styles/default-css-variables.css';
import '@mantine/core/styles/global.css';

CSS reset

The @mantine/core package includes minimal CSS reset – it includes only basic styles required for components to work in modern browsers. If you need to support older browsers, you can additionally include normalize.css or any other CSS reset of your choice.

css

body {
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
button,
textarea,
select {
  font: inherit;
}

button,
select {
  text-transform: none;
}

Body and :root elements styles

The @mantine/core package includes the following body and :root element styles:

css

:root {
  color-scheme: var(--mantine-color-scheme);
}

body {
  font-family: var(--mantine-font-family);
  font-size: var(--mantine-font-size-md);
  line-height: var(--mantine-line-height);
  background-color: var(--mantine-color-body);
  color: var(--mantine-color-text);

  -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
  -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
}

Static classes

The @mantine/core package includes the following static classes:

mantine-active – contains :active styles
mantine-focus-auto – contains :focus-visible styles
mantine-focus-always – contains :focus styles
mantine-focus-never – removes default browser focus ring
mantine-visible-from-{breakpoint} – shows element when screen width is greater than the breakpoint, for example mantine-visible-from-sm
mantine-hidden-from-{breakpoint} – hides element when screen width is greater than the breakpoint, for example mantine-hidden-from-sm

You can use these classes with any components or elements:

Add global styles in your application

It is recommended to use CSS modules to apply styles to Mantine components with the className prop or with Styles API. CSS modules file names usually end with .module.css. If you want to add global styles to your application, create a file with a .css extension but without the .module part, for example global.css.

In global .css files you can reference all Mantine CSS variables and change styles of <body />, :root, and other elements. For example, to change the body background-color:

css

body {
  background-color: var(--mantine-color-red-filled);
}