Hone UI
Components

CssBaseline

Set the page background, text color and font from the theme.

CssBaseline gives the page a baseline. It sets the body margin to 0, the body background and text color from the theme, the body font from the body1 typography variant, and border-box sizing that every element inherits. Render it once, near the root of your app. It is a Server Component.

import CssBaseline from '@hone-ui/react/CssBaseline';

Example

<ThemeProvider theme={theme}>
  <CssBaseline />
  <App />
</ThemeProvider>

How it works

CssBaseline renders its children plus one hidden marker element. The look CSS styles html and body only while that marker is in the page (:root:has(.hn-CssBaseline-root)). The rules ship with the look file you already import, so they apply in server HTML and with JavaScript off. Without CssBaseline, the page keeps your own body styles. Colors follow light and dark mode because they come from theme variables.

Props

PropTypeDefaultDescription
enableColorSchemebooleanfalseRestates color-scheme on html for the active mode.
unlayeredbooleanfalseAlso writes the page background and color-scheme unlayered.
noncestringFor the unlayered style, under a strict CSP.
childrenReactNodeRendered as is. CssBaseline adds no wrapper element around them.

Notes

  • There is no sx, className or ref, because no element wraps the children.
  • Both looks already set color-scheme on html. enableColorScheme matters only if your CSS overrides it.
  • ScopedCssBaseline is not included.

Divider

A thin line between pieces of content.

App Bar

The bar at the top of an app, with Toolbar for its content.

On this page

ExampleHow it worksPropsNotes