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

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
align'center'
| 'inherit'
| 'justify'
| 'left'
| 'right'		'inherit'
Define o text-align no componente.
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
Se true, o texto terá uma margem inferior.
noWrapboolfalse
Se true, o texto não será quebrado, mas em vez disso será cortado com elipses.
Note que o texto só poderá transbordar com elementos com display block ou inline-block (o elemento precisa ter uma largura para transbordar).
paragraphboolfalse
Se verdadeiro, o elemento será um elemento de parágrafo.
sxArray<func
| object
| bool>
| func
| 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', }
O componente mapeia a propriedade variant para um intervalo de diferentes tipos de elementos HTML. Por exemplo, subtitle1 é mapeado para <h6>. Se você deseja alterar este mapeamento, você pode fornecer o seu próprio. Alternativamente, você pode usar a propriedade component.

Como um utilitário CSS, o componente Typography também suporta todas as propriedades do sistema . Você pode usá-los como "props" diretamente no componente.

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