排版

常用文本实用工具的文档和示例，用于控制对齐、换行、粗细等。

变体

subtitle2

body1

body2

<Box sx={{ typography: 'subtitle2' }}>… // theme.typography.subtitle2
<Box sx={{ typography: 'body1' }}>…
<Box sx={{ typography: 'body2' }}>…

文本对齐

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.

左对齐文本。

居中对齐文本。

右对齐文本。

<Box sx={{ textAlign: 'left' }}>…
<Box sx={{ textAlign: 'center' }}>…
<Box sx={{ textAlign: 'right' }}>…

文本转换

首字母大写文本。

小写文本。

大写文本。

<Box sx={{ textTransform: 'capitalize' }}>…
<Box sx={{ textTransform: 'lowercase' }}>…
<Box sx={{ textTransform: 'uppercase' }}>…

字体粗细

细体

常规

中等

500

粗体

<Box sx={{ fontWeight: 'light' }}>… // theme.typography.fontWeightLight
<Box sx={{ fontWeight: 'regular' }}>…
<Box sx={{ fontWeight: 'medium' }}>…
<Box sx={{ fontWeight: 500 }}>…
<Box sx={{ fontWeight: 'bold' }}>…

字体样式

正常字体样式。

斜体字体样式。

倾斜字体样式。

<Box sx={{ fontStyle: 'normal' }}>…
<Box sx={{ fontStyle: 'italic' }}>…
<Box sx={{ fontStyle: 'oblique' }}>…

字体族

默认

等宽字体

<Box sx={{ fontFamily: 'default' }}>…
<Box sx={{ fontFamily: 'Monospace' }}>…

字母间距

字母间距 6px。

字母间距 10px。

<Box sx={{ letterSpacing: 6 }}>…
<Box sx={{ letterSpacing: 10 }}>…

行高

正常高度。

行高：2

<Box sx={{ lineHeight: 'normal' }}>…
<Box sx={{ lineHeight: 10 }}>…

API

import { typography } from '@mui/system';

导入名称	Prop	CSS 属性	主题键
`typography`	`typography`	`font-family`、`font-weight`、`font-size`、`line-height`、`letter-spacing`、`text-transform`	`typography`
`fontFamily`	`fontFamily`	`font-family`	`typography`
`fontSize`	`fontSize`	`font-size`	`typography`
`fontStyle`	`fontStyle`	`font-style`	`typography`
`fontWeight`	`fontWeight`	`font-weight`	`typography`
`letterSpacing`	`letterSpacing`	`letter-spacing`	none
`lineHeight`	`lineHeight`	`line-height`	none
`textAlign`	`textAlign`	`text-align`	none
`textTransform`	`textTransform`	`text-transform`	none