Menu
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?
342
Material-UI is simply a library that allows us to import and use different components to create a user interface in our React applications. This saves a significant amount of time since the developers do not need to write everything from scratch.
A CssBaseline component is a collection of HTML element and attribute style-normalizations. At the <head> of our document, it is added as CSS reset. This component is used to add some basic styling to our application like box-sizing, background color, etc like Css reset for our application on top of Theme.
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, }, }, 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:
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
