Question

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

Answer 1

CssBaseline是一种CSS重置，已添加到文档的<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,
        },
      },

Answer 2

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

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

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

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

Answer 3

有关-但我似乎在任何地方都找不到答案。您可以按照link在Github上的Material-UI库的存储库中找到CssBaseLine的代码。

Answer 4

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提供了MuiCssBaseline，它覆盖了我们的某些CSS样式。但是MUI 提供了覆盖其默认样式的灵活性。这是我已经实现的

1：创建theme.js并导入createMuiTheme。然后根据您的要求覆盖MuiBaseline的样式并导出theme.js。

2。如果要在整个应用程序中覆盖样式，然后将material.ui / core / styles中的theme.js，MuiThemeProvider导入到index.js中，则MuiThemeProvider将主题用作参数，然后将样式应用于其主题子组件。

Answer 5

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

CssBaseline类做什么？

5 个答案: