CSS 基线

Joy UI 提供了一个 CssBaseline 组件，以启动一个优雅、一致且简单的基线，供您在其上构建。

全局重置

您可能熟悉 normalize.css，它是 HTML 元素和属性样式规范化的集合。

import * as React from 'react';
import { CssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/joy/CssBaseline';

export default function MyApp() {
  return (
    <CssVarsProvider>
      {/* must be used under CssVarsProvider */}
      <CssBaseline />

      {/* The rest of your application */}
    </CssVarsProvider>
  );
}

子节点作用域

但是，您可能正在逐步将网站迁移到 Joy UI，全局重置可能不是一个选项。可以通过使用 ScopedCssBaseline 组件仅将基线应用于子节点。

import * as React from 'react';
import { CssVarsProvider } from '@mui/joy/styles';
import ScopedCssBaseline from '@mui/joy/ScopedCssBaseline';
import MyApp from './MyApp';

export default function MyApp() {
  const [root, setRoot] = React.useState(null);
  return (
    {/* target the node to ScopedCssBaseline's div */}
    <CssVarsProvider colorSchemeNode={root}>
      {/* must be used under CssVarsProvider */}
      <ScopedCssBaseline ref={(element) => setRoot(element)}>
        {/* The rest of your application */}
        <MyApp />
      </ScopedCssBaseline>
    </CssVarsProvider>
  );
}

方法

页面

<html> 和 <body> 元素已更新，以提供更好的页面范围默认值。更具体地说

所有浏览器中的 margin 已被移除。
应用了默认的 Material Design 背景颜色。它为标准设备使用 theme.palette.background.body，为打印设备使用白色背景。
默认情况下应用了 CSS color-scheme。您可以通过在 CssBaseline 或 ScopedCssBaseline 上将 disableColorScheme 设置为 true 来禁用它。

布局

box-sizing 在 <html> 元素上全局设置为 border-box。每个元素（包括 *::before 和 *::after）都被声明为继承此属性，这确保了元素的声明宽度永远不会因内边距或边框而超出。

配色方案

默认情况下应用了 CSS color-scheme，以在 Web 上渲染正确的内置组件。您可以通过在 CssBaseline 或 ScopedCssBaseline 上将 disableColorScheme 设置为 true 来禁用它。

<CssVarsProvider>
  <CssBaseline disableColorScheme />
</CssVarsProvider>

// or
<CssVarsProvider>
  <ScopedCssBaseline disableColorScheme >
    {/* The rest of your application */}
  </ScopedCssBaseline>
</CssVarsProvider>

排版

<html> 上未声明基本 font-size，但假定为 16px（浏览器默认值）。您可以在主题文档页面中了解有关更改 <html> 默认字体大小的影响的更多信息。
在 <body> 元素上设置默认 Typography 的级别（body1）样式。该样式来自 theme.typography.{default typography level prop}。
将 <b> 和 <strong> 元素的 font-weight 设置为 bold。
启用自定义字体平滑以更好地显示默认字体。

自定义

CssBaseline

要自定义 CssBaseline 组件生成的样式，请在其旁边附加 GlobalStyles

import { CssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/joy/CssBaseline';
import GlobalStyles from '@mui/joy/GlobalStyles';

function App() {
  return (
    <CssVarsProvider>
      <CssBaseline /> {/* CssBaseline must come first */}
      <GlobalStyles
        styles={{
          // CSS object styles
          html: {
            // ...
          },
          body: {
            // ...
          },
        }}
      />
    </CssVarsProvider>
  );
}

ScopedCssBaseline

您可以使用主题化组件方法对其进行自定义。组件标识符是 JoyScopedCssBaseline，它仅包含 root 插槽。

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
import ScopedCssBaseline from '@mui/joy/ScopedCssBaseline';
import MyApp from './MyApp';

const theme = extendTheme({
  components: {
    JoyScopedCssBaseline: {
      styleOverrides: {
        root: ({ theme }) => ({
          // ...CSS object styles
        })
      }
    }
  }
})

export default function MyApp() {
  const [root, setRoot] = React.useState(null);
  return (
    {/* target the node to ScopedCssBaseline's div */}
    <CssVarsProvider colorSchemeNode={root}>
      {/* must be used under CssVarsProvider */}
      <ScopedCssBaseline ref={(element) => setRoot(element)}>
        {/* The rest of your application */}
        <MyApp />
      </ScopedCssBaseline>
    </CssVarsProvider>
  );
}

API

请参阅下面的文档，以获取此处提及的组件的所有可用 props 和类的完整参考。