CSS Baseline

The CssBaseline component establishes a refined, uniform, and straightforward foundation for building your application.

Global reset

You may be familiar with normalize.css, a set 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

If you're gradually transitioning a website to Material UI, a global reset may not be feasible. You can apply the baseline only to child elements 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>
  );
}

⚠️ Ensure that ScopedCssBaseline is imported first to prevent box-sizing conflicts, as shown in the example above.

Approach

Layout

box-sizing is globally set to border-box on the <html> element. All elements, including *::before and *::after, inherit this property, ensuring that an element's declared width is not exceeded due to padding or border.

Scrollbars

:::error This API is deprecated. Consider using color-scheme instead. :::

Scrollbar colors can be customized to enhance contrast, particularly on Windows. Include this code in 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,
      }),
    },
  },
});

Note that using this utility (and customizing -webkit-scrollbar) will cause macOS to always display the scrollbar.

Color scheme

Introduced in @mui/material (v5.1.0), this API enables switching between "light" and "dark" modes for native components, such as scrollbars, using the color-scheme CSS property. To activate it, set enableColorScheme=true as shown below:

<CssBaseline enableColorScheme />

// or

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

Typography

No base font-size is set on the <html> element, but 16px is assumed (the browser default). Learn more about the implications of modifying the <html> default font size in the theme documentation page.
The theme.typography.body1 style is applied to the <body> element.
The font-weight is set to theme.typography.fontWeightBold for the <b> and <strong> elements.
Custom font-smoothing is enabled to optimize the display of the Roboto font.

Customization

Visit the global customization section of the documentation to modify the output of these components.