---
components: CssBaseline
---
# CSS-Baseline
Die Material-UI bietet eine CssBaseline-Komponente, um eine elegante, konsistente und einfache Basis zu schaffen, auf der aufgebaut werden kann.
Möglicherweise kennen Sie [normalize.css](https://github.com/necolas/normalize.css), eine Sammlung von HTML-Element- und Attributstil-Normalisierungen.
```jsx
import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
function MyApp() {
return (
{/* Der Rest deiner Applikation */}
);
}
export default MyApp;
```
## Ansatz
### Seite
Die Elemente `` und `` werden aktualisiert, um bessere seitenweite Standardeinstellungen zu erhalten. Genauer:
- Der Rand in allen Browsern wird entfernt.
- Die Standardhintergrundfarbe des Materialdesigns wird angewendet. Es verwendet [`theme.palette.background.default`](/customization/default-theme/?expend-path=$.palette.background) für Standardgeräte und einen weißen Hintergrund für Druckgeräte.
### Layout
- `box-sizing` wird global auf dem `` Element auf `border-box` gesetzt. Jedes Element, einschließlich `*::before` und `*::after` erbt dieser Eigenschaft. Dadurch wird sichergestellt, dass die deklarierte Breite des Elements niemals durch Auffüllung oder Rand überschritten wird.
### Typografie
- Für das ``-Element wird keine Basisschriftgröße deklariert, es wird jedoch von 16px ausgegangen (Standardeinstellung des Browsers). Sie können mehr über die Auswirkungen lernen von den sich ändernden `` Standard - Schriftgröße auf [der Theme Dokumentation](/customization/typography/#typography-html-font-size) Seite.
- Set the `theme.typography.body2` style on the `` element.
- Set the font-weight to "bolder" for the `` and `` elements. Bolder is one font weight heavier than the parent element (among the available weights of the font).
- Das Antialiasing von Schriftarten ist aktiviert, um die Roboto-Schrift besser anzuzeigen.