What does the CssBaseline class do?

Question

I've been wondering what the CssBaseline class in the Material-UI React library does, but I can't seem to find an answer anywhere, and the page I linked doesn't do much explaining about what the class does. Does anyone here know what this component is supposed to do?

score 28 · Answer 1 · edited Jul 24 '23 at 13:19

CssBaseline is sort of css reset added to the <head /> of your document. If you are familiar with similar approaches like normalize.css which adds some default visual styling to default elements, resets paddings and etc ...

Material-UI provides some reset styles as you can observe here CssBasline.js mainly box-sizing and body font color and background color

 '@global': {
      html: {
        WebkitFontSmoothing: 'antialiased', // Antialiasing.
        MozOsxFontSmoothing: 'grayscale', // Antialiasing.
        // Change from `box-sizing: content-box` so that `width`
        // is not affected by `padding` or `border`.
        boxSizing: 'border-box',
      },
      '*, *::before, *::after': {
        boxSizing: 'inherit',
      },
      'strong, b': {
        fontWeight: 'bolder',
      },
      body: {
        margin: 0, // Remove the margin in all browsers.
        color: theme.palette.text.primary,
        ...theme.typography.body2,
        backgroundColor: theme.palette.background.default,
        '@media print': {
          // Save printer ink.
          backgroundColor: theme.palette.common.white,
        },
      },

How does it differ from GlobalStyles? – Ini Feb 14 '23 at 11:13 — Ini, Feb 14 '23 at 11:13

score 11 · Answer 2 · answered Jul 16 '19 at 13:40

The docs say that its a collection of HTML element and attribute style-normalizations. It's based on normalize.js, which is a modern cross-browser CSS reset for your HTML elements that preserves some of the defaults.

Basically, it resets your CSS to a consistent baseline. That way, you can restyle your HTML doc so that you know you can expect all of the elements to look the same across all browsers.

What normalize.js does, from the readme linked above:

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.

score 1 · Answer 3 · answered Oct 10 '20 at 06:18

import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "*, *::before, *::after": {
          boxSizing: "content-box",
        },

        body: {
          backgroundColor: "#fff",
        },
      },
    },
  },
});
export default theme;

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import { MuiThemeProvider } from "@material-ui/core/styles";
import theme from "./Theme/Theme";

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  </MuiThemeProvider>,
  document.getElementById("root")
);
serviceWorker.unregister();

Basically, The MUI provides MuiCssBaseline that overrides some of our CSS styles. But MUI provides the flexibility to override its default style. Here is what I have implemented

1: Create a theme.js and import createMuiTheme. Then override the styles of MuiBaseline based on your requirements and export the theme.js.

2.If you want the overridden style all over your application then import theme.js, MuiThemeProvider from material-ui/core/styles into your index.js, MuiThemeProvider takes the theme as an argument and then applies the style to its children components.

You might be overriding what `CssBaseLine` does, but I don't see where you add `CssBaseLine` to the DOM. My understanding is, unless you do this, it has no effect. — x-yuri, Nov 06 '21 at 00:58
`CssBaseline` is imported from `@mui/material`. You can check the `node_modules/@mui/materia/CssBaseline/CssBaseline.js` to see what it does exactly. It's pretty much as Milos has said "provides a reset for box-sizing, body font color, and background color". To use it, just follow the "Global Reset" section from the mui docs here: https://mui.com/material-ui/react-css-baseline/ — Fiddle Freak, May 07 '22 at 19:52

score 0 · Answer 4 · answered Mar 03 '21 at 01:49

0

By putting at top of your component is used for providing a lot of default styling for your material UI applications so that you don't have to worry about basic styles of your component

answered Mar 03 '21 at 01:49

Vansh Bhardwaj

427
5
9

What does the CssBaseline class do?

4 Answers4