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

TypographyAPI

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

演示

导入

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

通过阅读有关最小化 bundle size 的指南，了解差异。

Props

原生组件的 Props 也可用。

名称类型默认描述
align'center'
| 'inherit'
| 'justify'
| 'left'
| 'right'		'inherit'

设置组件上的 text-align。

childrennode-

组件的内容。

classesobject-

覆盖或扩展应用于组件的样式。

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

color'primary'
| 'secondary'
| 'success'
| 'error'
| 'info'
| 'warning'
| 'textPrimary'
| 'textSecondary'
| 'textDisabled'
| string		-

组件的颜色。它支持默认和自定义主题颜色，可以按照调色板自定义指南中所示的方式添加。

componentelementType-

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

gutterBottomboolfalse

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

noWrapboolfalse

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

paragraphboolfalse

如果为 true，则元素将为段落元素。

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

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

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

variant'body1'
| 'body2'
| 'button'
| 'caption'
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'inherit'
| 'overline'
| 'subtitle1'
| 'subtitle2'
| string		'body1'

应用主题排版样式。

variantMappingobject{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p', inherit: 'p', }

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

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

ref 被转发到根元素。

主题默认 props

您可以使用 MuiTypography 通过主题更改此组件的默认 props。

CSS 类

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

类名规则名描述
.MuiTypography-alignCenteralignCenter如果 align="center"，则应用于根元素的样式。
.MuiTypography-alignJustifyalignJustify如果 align="justify"，则应用于根元素的样式。
.MuiTypography-alignLeftalignLeft如果 align="left"，则应用于根元素的样式。
.MuiTypography-alignRightalignRight如果 align="right"，则应用于根元素的样式。
.MuiTypography-body1body1如果 variant="body1"，则应用于根元素的样式。
.MuiTypography-body2body2如果 variant="body2"，则应用于根元素的样式。
.MuiTypography-buttonbutton如果 variant="button"，则应用于根元素的样式。
.MuiTypography-captioncaption如果 variant="caption"，则应用于根元素的样式。
.MuiTypography-gutterBottomgutterBottom如果 gutterBottom={true}，则应用于根元素的样式。
.MuiTypography-h1h1如果 variant="h1"，则应用于根元素的样式。
.MuiTypography-h2h2如果 variant="h2"，则应用于根元素的样式。
.MuiTypography-h3h3如果 variant="h3"，则应用于根元素的样式。
.MuiTypography-h4h4如果 variant="h4"，则应用于根元素的样式。
.MuiTypography-h5h5如果 variant="h5"，则应用于根元素的样式。
.MuiTypography-h6h6如果 variant="h6"，则应用于根元素的样式。
.MuiTypography-inheritinherit如果 variant="inherit"，则应用于根元素的样式。
.MuiTypography-noWrapnoWrap如果 nowrap={true}，则应用于根元素的样式。
.MuiTypography-overlineoverline如果 variant="overline"，则应用于根元素的样式。
.MuiTypography-paragraphparagraph如果 paragraph={true}，则应用于根元素的样式。
.MuiTypography-rootroot应用于根元素的样式。
.MuiTypography-subtitle1subtitle1如果 variant="subtitle1"，则应用于根元素的样式。
.MuiTypography-subtitle2subtitle2如果 variant="subtitle2"，则应用于根元素的样式。

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

源代码

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