CSSBaseline

The CSSBaseline component normalizes styles using normalize.css that provides better cross-browser consistency in the default styling of HTML elements.

Preserves useful defaults, unlike many CSS resets.
Normalizes styles for a wide range of elements.
Corrects bugs and common browser inconsistencies.
Improves usability with subtle modifications.
Explains what code does using detailed comments.

Import

import { CSSBaseline } from '@trendmicro/react-styled-ui';import { CSSBaseline } from '@trendmicro/react-styled-ui';

Usage

<>
  <CSSBaseline />
  <App />
</><>
  <CSSBaseline />
  <App />
</>

Notes

box-sizing is set globally on the html element to border-box. Every element including *::before and *::after will inherit this property, which ensures that the width of the element is never exceeded due to padding or border.
No font size is declared on <html>, but 16px is assumed as the browser default.

Base font family is declared on <html>:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

Monospaced font family is delcared on <pre>, <code>, <kbd>, and <samp>:

font-family: "SFMono-Medium", "SF Mono", "Segoe UI Mono", Menlo, Consolas, Courier, monospace;font-family: "SFMono-Medium", "SF Mono", "Segoe UI Mono", Menlo, Consolas, Courier, monospace;