CSS 基线
CssBaseline 组件帮助启动一个优雅、一致且简单的基线，以便在其上构建。
全局重置
您可能熟悉 normalize.css，它是 HTML 元素和属性样式规范化的集合。
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
export default function MyApp() {
return (
<React.Fragment>
<CssBaseline />
{/* The rest of your application */}
</React.Fragment>
);
}
作用域限定于子元素
但是，您可能正在逐步将网站迁移到 Material UI，使用全局重置可能不是一个选项。 可以通过使用 ScopedCssBaseline 组件将基线仅应用于子元素。
import * as React from 'react';
import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
import MyApp from './MyApp';
export default function MyApp() {
return (
<ScopedCssBaseline>
{/* The rest of your application */}
<MyApp />
</ScopedCssBaseline>
);
}
⚠️ 确保首先导入 ScopedCssBaseline，以避免像上面示例中那样的 box-sizing 冲突。
方法
页面
<html> 和 <body> 元素已更新，以提供更好的页面范围默认值。 更具体地说
- 移除了所有浏览器中的外边距。
- 应用了默认的 Material Design 背景颜色。 它对标准设备使用
theme.palette.background.default，对打印设备使用白色背景。 - 如果为
CssBaseline提供了enableColorScheme，则将通过在<html>上应用color-scheme来设置原生组件颜色。 使用的值由主题属性theme.palette.mode提供。
布局
box-sizing在<html>元素上全局设置为border-box。 每个元素（包括*::before和*::after）都被声明为继承此属性，这确保了元素的声明宽度永远不会因内边距或边框而超出。
滚动条
可以自定义滚动条的颜色以提高对比度（尤其是在 Windows 上）。 将此代码添加到您的主题中（用于暗黑模式）。
import darkScrollbar from '@mui/material/darkScrollbar';
const theme = createTheme({
components: {
MuiCssBaseline: {
styleOverrides: (themeParam) => ({
body: themeParam.palette.mode === 'dark' ? darkScrollbar() : null,
}),
},
},
});
但是请注意，使用此实用程序（并自定义 -webkit-scrollbar）会强制 macOS 始终显示滚动条。
颜色方案
此 API 在 @mui/material (v5.1.0) 中引入，用于在使用 color-scheme CSS 属性的原生组件（例如滚动条）的浅色和深色模式之间切换。 要启用它，您可以按如下所示设置 enableColorScheme=true
<CssBaseline enableColorScheme />
// or
<ScopedCssBaseline enableColorScheme >
{/* The rest of your application using color-scheme*/}
</ScopedCssBaseline>
排版
- 在
<html>上未声明基本字体大小，但假定为 16px（浏览器默认值）。 您可以在主题文档页面中了解有关更改<html>默认字体大小的更多信息。 - 在
<body>元素上设置theme.typography.body1样式。 - 将
<b>和<strong>元素的字体粗细设置为theme.typography.fontWeightBold。 - 启用了自定义字体平滑，以更好地显示 Roboto 字体。
自定义
前往文档的全局自定义部分以更改这些组件的输出。