CssBaseline 类有啥作用?

Posted

技术标签:

【中文标题】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 的控制标签类有啥作用?

java中Method类有啥作用

java中Map类有啥作用,具体怎么用呢

Java 中 package-info 这个类有啥作用,如何使用

不明白java中的泛型和抽象类有啥区别,感觉他们作用一样啊,为啥要用2种方法呢

这个rails form_for的这个类有啥问题?