Оформление текста

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Выравнивание текста

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

Left aligned text.

Center aligned text.

Right aligned text.

<Box textAlign="left">…
<Box textAlign="center">…
<Box textAlign="right">…

Font weight

Light

Regular

Medium

500

Bold

<Box fontWeight="fontWeightLight">…
<Box fontWeight="fontWeightRegular">…
<Box fontWeight="fontWeightMedium">…
<Box fontWeight={500}>…
<Box fontWeight="fontWeightBold">…

Размер шрифта

Default

h6.fontSize

16px

<Box fontSize="fontSize">…
<Box fontSize="h6.fontSize">…
<Box fontSize={16}>…

Font Style

Normal font style.

Italic font Style.

Oblique font style.

<Box fontStyle="normal">…
<Box fontStyle="italic">…
<Box fontStyle="oblique">…

Шрифт

Default

Monospace

<Box fontFamily="fontFamily">…
<Box fontFamily="Monospace">…

Letter Spacing

Letter Spacing 6px.

Letter Spacing 10px.

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

Line Height

Normal height.

line-height: 2

<Box lineHeight="normal">…
<Box lineHeight={10}>…

API

import { typography } from '@material-ui/system';

Импорт	Свойство	Свойство CSS	В теме
`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