CssBaseline 类有什么作用？

Question

CssBaseline 类有什么作用？

我一直想知道Material-UI React 库中的CssBaseline类是做什么的，但我似乎无法在任何地方找到答案，而且我链接的页面并没有对类的作用做太多解释。这里有人知道这个组件应该做什么吗？

Answer 1

CssBaseline是一种 css reset 添加到<head />您的文档中。如果您熟悉类似normalize.css 之类的方法，它会为默认元素添加一些默认视觉样式、重置填充等......

Material-UI 提供了一些重置样式，您可以在这里观察CssBasline.js主要box-sizing和正文字体颜色和background颜色

 '@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,
        },
      },

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 8

文档说它的a collection of HTML element and attribute style-normalizations. 它基于normalize.js，这是一种现代跨浏览器 CSS 重置，用于保留一些默认值的 HTML 元素。

基本上，它会将您的 CSS 重置为一致的基线。这样，您可以重新设计 HTML 文档的样式，以便您知道可以期望所有元素在所有浏览器中看起来都相同。

normalize.js 做什么，来自上面链接的自述文件：

保留有用的默认值，与许多 CSS 重置不同。
标准化各种元素的样式。纠正错误和常见的浏览器不一致问题。
通过细微的修改提高可用性。
使用详细注释解释代码的作用。

归档时间：	6 年，6 月前
查看次数：	15374 次
最近记录：	4 年，10 月前