CSS Baseline

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> 元素已更新，以提供更好的全頁預設值。更具體地說：

已移除所有瀏覽器中的邊距。
已套用預設 Material Design 背景顏色。它針對標準裝置使用 theme.palette.background.body，針對列印裝置使用白色背景。
預設會套用 CSS color-scheme。您可以透過將 disableColorScheme 設定為 true 來停用 CssBaseline 或 ScopedCssBaseline 上的此功能。

版面配置

box-sizing 在 <html> 元素上全域設定為 border-box。每個元素（包括 *::before 和 *::after）都宣告繼承此屬性，這可確保元素的宣告寬度永遠不會因內邊距或邊框而超出。

色彩配置

預設會套用 CSS color-scheme，以便在網路上呈現正確的內建元件。您可以透過將 disableColorScheme 設定為 true 來停用 CssBaseline 或 ScopedCssBaseline 上的此功能。

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

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

排版

<html> 上未宣告基本字型大小，但假設為 16px（瀏覽器預設值）。您可以在主題文件頁面中，進一步了解變更 <html> 預設字型大小的影響。
在 <body> 元素上設定預設 Typography 的層級（body1）樣式。樣式來自 theme.typography.{default typography level prop}。
將 <b> 和 <strong> 元素的字型粗細設定為 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 和 classes 的完整參考。