Browse components

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

PropTypeDefault
enableColorSchemebooleanfalse
childrenReactNode