Skip to content
+

CSS Baseline

The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.

Global reset

You might be familiar with normalize.css, a collection of HTML element and attribute style-normalizations.

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* The rest of your application */}
    </React.Fragment>
  );
}

Scoping on children

However, you might be progressively migrating a website to Material UI, using a global reset might not be an option. It's possible to apply the baseline only to the children by using the ScopedCssBaseline component.

import * as React from 'react';
import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
import MyApp from './MyApp';

export default function MyApp() {
  return (
    <ScopedCssBaseline>
      {/* The rest of your application */}
      <MyApp />
    </ScopedCssBaseline>
  );
}

⚠️ Make sure you import ScopedCssBaseline first to avoid box-sizing conflicts as in the above example.

Approach

Page

The <html> and <body> elements are updated to provide better page-wide defaults. More specifically:

  • The margin in all browsers is removed.
  • The default Material Design background color is applied. It's using theme.palette.background.default for standard devices and a white background for print devices.
  • If enableColorScheme is provided to CssBaseline, native components color will be set by applying color-scheme on <html>. The value used is provided by the theme property theme.palette.mode.

Layout

  • box-sizing is set globally on the <html> element to border-box. Every element—including *::before and *::after are declared to inherit this property, which ensures that the declared width of the element is never exceeded due to padding or border.

Scrollbars

The colors of the scrollbars can be customized to improve the contrast (especially on Windows). Add this code to your theme (for dark mode).

import darkScrollbar from '@mui/material/darkScrollbar';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: (themeParam) => ({
        body: themeParam.palette.mode === 'dark' ? darkScrollbar() : null,
      }),
    },
  },
});

Be aware, however, that using this utility (and customizing -webkit-scrollbar) forces macOS to always show the scrollbar.

Color scheme

This API is introduced in @mui/material (v5.1.0) for switching between "light" and "dark" modes of native components such as scrollbar, using the color-scheme CSS property. To enable it, you can set enableColorScheme=true as follows:

<CssBaseline enableColorScheme />

// or

<ScopedCssBaseline enableColorScheme >
  {/* The rest of your application using color-scheme*/}
</ScopedCssBaseline>

Typography

  • No base font-size is declared on the <html>, but 16px is assumed (the browser default). You can learn more about the implications of changing the <html> default font size in the theme documentation page.
  • Set the theme.typography.body1 style on the <body> element.
  • Set the font-weight to theme.typography.fontWeightBold for the <b> and <strong> elements.
  • Custom font-smoothing is enabled for better display of the Roboto font.

Customization

Head to the global customization section of the documentation to change the output of these components.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.