Pular para o conteúdo
Ajude a traduzir esta página

Typography API

Documentação da API para o componente React Typography . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Typography from '@mui/material/Typography';
// ou
import { Typography } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiTypography can be used when providing default props or style overrides in the theme.

Propriedades

Props of the nativo component are also available.

NomeTipoPadrãoDescrição
align'center'
| 'inherit'
| 'justify'
| 'left'
| 'right'		'inherit'
Set the text-align on the component.
childrennode
O conteúdo do componente.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
gutterBottomboolfalse
If true, the text will have a bottom margin.
noWrapboolfalse
If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).
paragraphboolfalse
If true, the element will be a paragraph element.
sxfunc
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant'body1'
| 'body2'
| 'button'
| 'caption'
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'inherit'
| 'overline'
| 'subtitle1'
| 'subtitle2'
| string		'body1'
Applies the theme typography styles.
variantMappingobject{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p', inherit: 'p', }
The component maps the variant prop to a range of different HTML element types. For instance, subtitle1 to <h6>. If you wish to change that mapping, you can provide your own. Alternatively, you can use the component prop.

As a CSS utility, the Typography component also supports all system properties. You can use them as props directly on the component.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiTypography-rootEstilos aplicados ao elemento raiz.
body2.MuiTypography-body2Estilos aplicados para o elemento raiz se variant="body2".
body1.MuiTypography-body1Estilos aplicados para o elemento raiz se variant="body1".
caption.MuiTypography-captionEstilos aplicados para o elemento raiz se variant="caption".
button.MuiTypography-buttonEstilos aplicados para o elemento raiz se variant="button".
h1.MuiTypography-h1Estilos aplicados para o elemento raiz se variant="h1".
h2.MuiTypography-h2Estilos aplicados para o elemento raiz se variant="h2".
h3.MuiTypography-h3Estilos aplicados para o elemento raiz se variant="h3".
h4.MuiTypography-h4Estilos aplicados para o elemento raiz se variant="h4".
h5.MuiTypography-h5Estilos aplicados para o elemento raiz se variant="h5".
h6.MuiTypography-h6Estilos aplicados para o elemento raiz se variant="h6".
subtitle1.MuiTypography-subtitle1Estilos aplicados para o elemento raiz se variant="subtitle1".
subtitle2.MuiTypography-subtitle2Estilos aplicados para o elemento raiz se variant="subtitle2".
overline.MuiTypography-overlineEstilos aplicados para o elemento raiz se variant="overline".
inherit.MuiTypography-inheritEstilos aplicados para o elemento raiz se variant="inherit".
alignLeft.MuiTypography-alignLeftEstilos aplicados para o elemento raiz se align="left".
alignCenter.MuiTypography-alignCenterEstilos aplicados para o elemento raiz se align="center".
alignRight.MuiTypography-alignRightEstilos aplicados para o elemento raiz se align="right".
alignJustify.MuiTypography-alignJustifyEstilos aplicados para o elemento raiz se align="justify".
noWrap.MuiTypography-noWrapEstilos aplicados para o elemento raiz se nowrap={true}.
gutterBottom.MuiTypography-gutterBottomEstilos aplicados para o elemento raiz se gutterBottom={true}.
paragraph.MuiTypography-paragraphEstilos aplicados para o elemento raiz se paragraph={true}.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações