CssBaseline
import CssBaseline from "@shpaw415/mui-lite/CssBaseline";Why use it
CssBaseline injects a minimal global reset (box-sizing, font smoothing, body margin/font). Most apps should import @shpaw415/mui-lite/style.css once; add CssBaseline when you want the reset next to ThemeProvider without pulling the full component stylesheet again.
Demo
CssBaseline injects a global reset (box-sizing, font smoothing, body margins). Prefer importing @shpaw415/mui-lite/style.css once at the app root; use the component when you need the reset scoped with a theme tree.
import CssBaseline from "@shpaw415/mui-lite/CssBaseline";
import { ThemeProvider, DefaultTheme } from "@shpaw415/mui-lite/theme";
<ThemeProvider theme={DefaultTheme}>
<CssBaseline />
{children}
</ThemeProvider>Example
import CssBaseline from "@shpaw415/mui-lite/CssBaseline";
import { ThemeProvider, DefaultTheme } from "@shpaw415/mui-lite/theme";
export function Root({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider theme={DefaultTheme}>
<CssBaseline enableColorScheme />
{children}
</ThemeProvider>
);
}Props
| Prop | Type | Default |
|---|---|---|
| enableColorScheme | boolean | false |
| children | ReactNode | — |