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 类有啥作用?的主要内容,如果未能解决你的问题,请参考以下文章
Java 中 package-info 这个类有啥作用,如何使用