CssBaseline

This component provides an elegant, consistent, and simple baseline to build upon.

You might be familiar with normalize.css, a collection of HTML element and attribute style-normalizations.
One of the main purposes of <CssBaseline> is to do the similar job.

In-depth Responsibilities

In addition to the normalizations, this component will also do the followings:

Page

  • Remove the margins in all browsers.
  • Applies the theme's background color (colors.background[light|dark].origin) to the <body> element.

Layout

  • box-sizing: border-box is set globally on the <html> element. Every other element 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).
  • Sets the color property according to the theme's mode (dark or light) on the <body> element.
  • Sets the dir={theme.direction} attribute on the <body> element.
  • Sets the font-family to typography.fontFamily.rtl or typography.fontFamily.ltr based on the theme.direction.
  • Enables custom font smoothing and text rendering for better display of the web font.

CSS Variables

Exposes CSS variables to the :root so it can be used later in CSS.
The CSS variables are prefixed with --snt-. (e.g., --snt-ltr-font-family)