跳到主要內容
🚀 影響 Joy UI 的 2025 年開發藍圖！參與最新的開發者調查
+

主題排版

了解預設主題的排版系統以及如何自訂它。

預設系統

Joy UI 的預設主題包含一個內建的排版系統，具有 11 個不同的層級，包括語意化的 HTML 標題以及用於內文的類似系統，以幫助您確保介面的一致性。

層級

顏色

字體大小

字體粗細

行高

h1

var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #171A1C))

var(--joy-fontSize-xl4, 2.25rem)

var(--joy-fontWeight-xl, 700)

var(--joy-lineHeight-xs, 1.33334)

h2

var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #171A1C))

var(--joy-fontSize-xl3, 1.875rem)

var(--joy-fontWeight-xl, 700)

var(--joy-lineHeight-xs, 1.33334)

h3

var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #171A1C))

var(--joy-fontSize-xl2, 1.5rem)

var(--joy-fontWeight-lg, 600)

var(--joy-lineHeight-xs, 1.33334)

h4

var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #171A1C))

var(--joy-fontSize-xl, 1.25rem)

var(--joy-fontWeight-lg, 600)

var(--joy-lineHeight-md, 1.5)

title-lg

var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #171A1C))

var(--joy-fontSize-lg, 1.125rem)

var(--joy-fontWeight-lg, 600)

var(--joy-lineHeight-xs, 1.33334)

title-md

var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #171A1C))

var(--joy-fontSize-md, 1rem)

var(--joy-fontWeight-md, 500)

var(--joy-lineHeight-md, 1.5)

title-sm

var(--joy-palette-text-primary, var(--joy-palette-neutral-800, #171A1C))

var(--joy-fontSize-sm, 0.875rem)

var(--joy-fontWeight-md, 500)

var(--joy-lineHeight-sm, 1.42858)

body-lg

var(--joy-palette-text-secondary, var(--joy-palette-neutral-700, #32383E))

var(--joy-fontSize-lg, 1.125rem)

-

var(--joy-lineHeight-md, 1.5)

body-md

var(--joy-palette-text-secondary, var(--joy-palette-neutral-700, #32383E))

var(--joy-fontSize-md, 1rem)

-

var(--joy-lineHeight-md, 1.5)

body-sm

var(--joy-palette-text-tertiary, var(--joy-palette-neutral-600, #555E68))

var(--joy-fontSize-sm, 0.875rem)

-

var(--joy-lineHeight-md, 1.5)

body-xs

var(--joy-palette-text-tertiary, var(--joy-palette-neutral-600, #555E68))

var(--joy-fontSize-xs, 0.75rem)

var(--joy-fontWeight-md, 500)

var(--joy-lineHeight-md, 1.5)

用法

您可以使用幾種方式在應用程式中使用主題排版

Typography 組件

在 Typography 組件中使用 level prop

// use the `theme.typography['body-sm']` styles
<Typography level="body-sm">Secondary info</Typography>

CSS Baseline

CSS Baseline 組件將 body-md 作為全域樣式表上的預設層級套用。

<CssBaseline />

// inherits the `theme.typography['body-md']` styles
<p>Hello World</p>

sx 屬性

透過 sx 屬性使用 typography: 'some-level' 自訂排版樣式

// to apply the `theme.typography['body-sm']` styles:
<Box sx={{ typography: 'body-sm' }}>Small text</Box>

將主題樣式套用至自訂組件

使用 `styled` 函數建立自訂組件，並從 theme.typography.* 套用樣式。

import { styled } from '@mui/joy/styles';

const Tag = styled('span')((theme) => ({
  ...theme.typography['body-sm'],
  color: 'inherit',
  borderRadius: theme.vars.radius.xs,
  boxShadow: theme.vars.shadow.sm,
  padding: '0.125em 0.375em',
}));

自訂

若要自訂預設層級，請提供其名稱作為鍵，並將包含 CSS 規則的物件作為值提供給 theme.typography 節點。

以下範例說明了 h1 層級的自訂。

這是一個漸層 h1
按下 Enter 開始編輯

移除預設系統

使用 undefined 作為值以移除任何不需要的層級

const customTheme = extendTheme({
  typography: {
    'title-sm': undefined,
    'title-xs': undefined,
  },
});

對於 TypeScript，您必須擴充主題結構以排除預設層級。

// You can put this to any file that's included in your tsconfig
declare module '@mui/joy/styles' {
  interface TypographySystemOverrides {
    'title-sm': false;
    'title-xs': false;
  }
}

新增更多層級

若要新增層級，請在 theme.typography 節點中將其定義為鍵值對，其中鍵是新層級的名稱，而值是包含 CSS 規則的物件。

以下示範說明如何新增名為 kbd 的層級。

按下 ⌘ + k 以搜尋文件。

按下 Enter 開始編輯

對於 TypeScript，您必須擴充主題結構以包含新層級。

// You can put this to any file that's included in your tsconfig
declare module '@mui/joy/styles' {
  interface TypographySystemOverrides {
    kbd: true;
  }
}

變更預設字體

Joy UI 預設使用 Inter 字體。若要變更它，請覆寫主題的 fontFamily 屬性。

extendTheme({
  fontFamily: {
    display: 'Noto Sans', // applies to `h1`–`h4`
    body: 'Noto Sans', // applies to `title-*` and `body-*`
  },
});

常見範例

這裡收集了許多著名的排版系統，您可以與 Joy UI 一起使用。如果這裡沒有您喜歡的系統，請隨時提交 PR 來新增。❤️

Microsoft Fluent

Apple Human Interface Guidelines

Google Material Design 3