排版
排版组件帮助清晰有效地呈现设计和内容。
简介
排版组件通过提供一组有限的值供选择以及方便的属性来更快地构建通用设计，从而帮助保持一致的设计。
Lorem ipsum 是占位符文本，通常用于图形、印刷和出版行业，用于预览布局和视觉模型。
<Typography />Playground
国家公园
优胜美地国家公园
优胜美地国家公园是一个国家公园，占地 747,956 英亩（1,169.4 平方英里；3,025.2 平方公里），位于加利福尼亚州中部内华达山脉西部。
h1: Lorem ipsum
h2: 什么是 Lorem Ipsum？
h3: 标准的 Lorem Ipsum 段落。
h4: 页面中最小的标题
标题和正文
除了标题排版级别外，排版组件还提供 title-* 和 body-* 类型级别。
为了确保正确的信息层次结构，我们建议将它们组合使用，使用相同的大小或更小的大小。例如，将 title-lg 与 body-lg 或 title-md 与 body-sm 结合使用。
组件标题 title-lg
这是组件的描述，其中包含一些信息。 body-md
组件标题 title-md
这是组件的描述，其中包含一些信息。 body-md
元数据，例如日期。 body-sm
组件标题 title-sm
这是组件的描述，其中包含一些信息。 body-sm
元数据，例如日期。 body-xs嵌套排版
默认情况下，排版组件渲染为 <p>。嵌套的排版组件渲染为 <span> 元素（除非通过component 属性自定义）。
排版允许您创建 嵌套排版。发挥您的 想象力 来构建精彩的 用户界面.
自定义
系统属性
作为 CSS 实用程序组件，排版支持每个 MUI System 属性。这些属性可用于自定义组件的样式，使其与整体设计无缝契合。
// Using the neutral color palette that defaults to the 500 value
<Typography color="neutral" fontSize="sm" fontWeight="lg" />
// Changing the specific element's color to neutral
<Typography textColor="neutral.300" fontSize="sm" fontWeight="lg" >
级别
level 属性允许访问主题中定义的预定义排版值比例。这些值包括各种标题级别（h1、h2、h3 等）以及正文文本级别（body-md、body-sm 等），可用于在整个应用程序中应用一致的排版。此外，您还可以使用 level 属性来控制字体大小、粗细、行高等排版属性。
h1
h2
h3
h4
title-lg
title-md
title-sm
body-lg
body-md
body-sm
body-xs语义元素
要自定义使用的语义元素，您可以使用 component 属性。这在您想要使用与 level 属性分配的语义元素不同的语义元素的情况下非常有用。组件将渲染为由 component 定义的 HTML 元素，但具有分配给其各自 level 的样式。
// There's already an h1 on the page so let's not add another one.
<Typography level="h1" component="h2">
I render as an h2, but I have h1 styles
</Typography>
以更有效的方式，您可以在主题级别更改 HTML 映射标签。
const theme = extendTheme({
components: {
JoyTypography: {
defaultProps: {
levelMapping: {
h1: 'h2',
h2: 'h2',
h3: 'h3',
h4: 'h3',
'title-lg': 'p',
'title-md': 'p',
'title-sm': 'p',
'body-md': 'p',
'body-sm': 'p',
'body-xs': 'span',
},
},
},
},
});
装饰器
使用 startDecorator 和 endDecorator 属性向排版添加支持图标或元素。
图标自动调整到比例
显示也更改为 flexbox123
排版比例
要创建自定义排版比例，您可以在主题级别的 theme.typography 节点中定义键和值。
extendTheme({
typography: {
subtitle: {
fontSize: 'var(--joy-fontSize-lg)',
fontWeight: 'var(--joy-fontWeight-md)',
// CSS selectors are also supported!
'& + p': {
marginTop: '4px',
},
},
label: {
fontSize: 'var(--joy-fontSize-sm)',
fontWeight: 'var(--joy-fontWeight-lg)',
lineHeight: 'var(--joy-lineHeight-lg)',
marginBottom: '3px',
},
},
});
您还可以从 level 属性访问新创建的级别
<Typography level="subtitle">
<Typography level="label">
移除默认比例
要删除任何未使用的排版级别（例如，如果您要构建自己的完全自定义比例），您可以通过在主题中将 undefined 分配给它们来清除内置值。
extendTheme({
typography: {
h1: undefined,
h2: undefined,
h3: undefined,
h4: undefined,
'title-lg': undefined,
'title-md': undefined,
'title-sm': undefined,
'body-lg': undefined,
'body-md': undefined,
'body-sm': undefined,
'body-xs': undefined,
// ...your scale
},
});
使用 TypeScript 时，请务必也从类型中删除内置的排版令牌。
// in your theme or index file
declare module '@mui/joy/styles' {
interface TypographySystemOverrides {
h1: false;
h2: false;
h3: false;
h4: false;
'title-lg': false;
'title-md': false;
'title-sm': false;
'body-lg': false;
'body-md': false;
'body-sm': false;
'body-xs': false;
}
}
常见示例
下面的演示说明了排版组件与装饰器等其他组件的多种用法。
未激活
$25
此示例演示了文本的多行。
🚨仅使用排版的简单警报。
+8.2%自上个月以来
无障碍性
以下是一些确保您的排版组件具有无障碍性的因素
- 确保文本和背景之间有足够的颜色对比度，使用至少 WCAG 2.0 的颜色对比度比率 4.5:1。
- 对
fontSize使用 相对单位（例如 rem）以适应用户的设置。 - 使用一致的标题层级结构，并避免跳过级别。
- 通过使用适当的语义元素（#semantic-elements）来保持语义和样式分离。
结构
排版组件由单个根 <p> 组成，该根 <p> 被分配了 body-md 类，除非这些默认值被 level 和/或 component 属性覆盖。
当一个排版组件嵌套在另一个组件中时，嵌套组件将渲染为 <span>（除非如上所述进行自定义）。
<p class="MuiTypography-root MuiTypography-body-md">
<!-- Typography content -->
<span class="MuiTypography-root MuiTypography-inherit">
<!-- Nested Typography content -->
</span>
</p>