跳到主要内容
🚀 影响 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 属性

// 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

  • 设计资源：Figma
  • 字体：Segoe UI

Apple 人机界面指南

  • 设计资源：Sketch library
  • 字体：San Francisco (SF)

Google Material Design 3

  • 设计资源：Figma
  • 字体：Roboto