CSS Baseline

Material-UI provides a CssBaseline component 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 React from 'react';
import CssBaseline from '@material-ui/core/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 React from 'react';
import ScopedCssBaseline from '@material-ui/core/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.

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.

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.body2 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.