CssBaseline 类有啥作用？

Posted 2023-02-22

技术标签:

【中文标题】CssBaseline 类有啥作用？【英文标题】：What does the CssBaseline class do?CssBaseline 类有什么作用？ 【发布时间】：2019-11-25 06:02:13 【问题描述】：

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

【问题讨论】：

【参考方案1】：

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,
        ,
      ,

【讨论】：

【参考方案2】：

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

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

normalize.js 的作用，来自上面链接的自述文件：

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

【讨论】：

【参考方案3】：

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();

基本上，MUI 提供了覆盖我们的一些 CSS 样式的 MuiCssBaseline。但是MUI 提供了覆盖其默认样式的灵活性。这是我已经实现的

1：创建一个theme.js并导入createMuiTheme。然后根据你的需求覆盖MuiBaseline的样式，导出theme.js。

2.如果你想在你的应用程序中覆盖样式然后从 material-ui/core/styles 中导入 theme.js, MuiThemeProvider 到你的 index.js 中，MuiThemeProvider 将主题作为参数，然后将样式应用到它的子组件。

【讨论】：

您可能会覆盖 CssBaseLine 所做的事情，但我看不到您将 CssBaseLine 添加到 DOM 的位置。我的理解是，除非你这样做，否则没有任何效果。【参考方案4】：

与 - 但我似乎无法在任何地方找到答案。您可以通过关注link，在 Github 上 Material-UI 库的存储库中找到 CssBaseLine 的代码。

【讨论】：

【参考方案5】：

通过放置在您的组件顶部用于为您的 Material UI 应用程序提供许多默认样式，这样您就不必担心组件的基本样式

【讨论】：

以上是关于CssBaseline 类有啥作用？的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 的控制标签类有啥作用？