时间戳

首页 > 解决方案 > CssBaseline 类有什么作用？

reactjs - CssBaseline 类有什么作用？

问题描述

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

标签： reactjsmaterial-ui

解决方案

CssBaseline是添加到<head />文档中的一种 CSS 重置。如果您熟悉类似的方法，例如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,
        },
      },

推荐阅读