跳到主要内容跳到主要内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

TypographyAPI

React Typography 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

导入

import Typography from '@mui/joy/Typography';
// or
import { Typography } from '@mui/joy';

通过阅读这篇关于最小化 bundle 大小的指南，了解它们之间的区别。

属性

原生组件的属性也可用。

名称类型默认值描述
childrennode-

组件的内容。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		-

组件的颜色。它支持对此组件有意义的主题颜色。

要了解如何添加您自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以使用字符串来使用 HTML 元素或组件。

endDecoratornode-

放置在子元素之后的元素。

gutterBottomboolfalse

如果为 true，文本将具有底部边距。

level'h1'
| 'h2'
| 'h3'
| 'h4'
| 'title-lg'
| 'title-md'
| 'title-sm'
| 'body-lg'
| 'body-md'
| 'body-sm'
| 'body-xs'
| 'inherit'
| string		'body-md'

应用主题排版样式。

levelMappingobject{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', 'title-lg': 'p', 'title-md': 'p', 'title-sm': 'p', 'body-lg': 'p', 'body-md': 'p', 'body-sm': 'p', 'body-xs': 'span', inherit: 'p', }

组件将 variant 属性映射到一系列不同的 HTML 元素类型。例如，body1 映射到 <h6>。如果您希望更改该映射，您可以提供自己的映射。或者，您可以使用 component 属性。

noWrapboolfalse

如果为 true，文本将不会换行，而是会使用文本溢出省略号截断。
请注意，文本溢出只能发生在块级或行内块级元素上（元素需要具有宽度才能溢出）。

slotProps{ endDecorator?: func
| object, root?: func
| object, startDecorator?: func
| object }		{}

用于每个内部插槽的属性。

slots{ endDecorator?: elementType, root?: elementType, startDecorator?: elementType }{}

用于每个内部插槽的组件。

有关更多详细信息，请参阅下面的 Slots API。

startDecoratornode-

放置在子元素之前的元素。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统属性。

有关更多详细信息，请参阅 `sx` 页面。

textColorany-

系统颜色。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		-

要使用的全局 variant。

要了解如何添加您自己的 variant，请查看主题组件—扩展 variant。

作为 CSS 实用程序，Typography 组件还支持所有 system 属性。您可以直接在组件上将它们用作属性。

ref 被转发到根元素。

主题默认属性

您可以使用 JoyTypography 通过主题更改此组件的默认属性。

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.MuiTypography-root'a'呈现根元素的组件。
startDecorator.MuiTypography-startDecorator'span'呈现 start 装饰器的组件。
endDecorator.MuiTypography-endDecorator'span'呈现 end 装饰器的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.MuiTypography-body-lgbody-lg如果 level="body-lg"，则应用于根元素的类名。
.MuiTypography-body-mdbody-md如果 level="body-md"，则应用于根元素的类名。
.MuiTypography-body-smbody-sm如果 level="body-sm"，则应用于根元素的类名。
.MuiTypography-body-xsbody-xs如果 level="body-xs"，则应用于根元素的类名。
.MuiTypography-colorContextcolorContext当颜色反转被触发时应用于根元素的类名。
.MuiTypography-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiTypography-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiTypography-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiTypography-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiTypography-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiTypography-gutterBottomgutterBottom如果 gutterBottom={true}，则应用于根元素的类名。
.MuiTypography-h1h1如果 level="h1"，则应用于根元素的类名。
.MuiTypography-h2h2如果 level="h2"，则应用于根元素的类名。
.MuiTypography-h3h3如果 level="h3"，则应用于根元素的类名。
.MuiTypography-h4h4如果 level="h4"，则应用于根元素的类名。
.MuiTypography-noWrapnoWrap如果 nowrap={true}，则应用于根元素的类名。
.MuiTypography-title-lgtitle-lg如果 level="title-lg"，则应用于根元素的类名。
.MuiTypography-title-mdtitle-md如果 level="title-md"，则应用于根元素的类名。
.MuiTypography-title-smtitle-sm如果 level="title-sm"，则应用于根元素的类名。
.MuiTypography-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiTypography-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiTypography-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiTypography-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中没有找到所需信息，请考虑查看组件的实现以获取更多详细信息。