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';Nome do componente
The nameMuiTypography can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente nativo também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| align | 'center' | 'inherit' | 'justify' | 'left' | 'right' | 'inherit' | Define o text-align no componente. |
| children | node | O conteúdo do componente. | |
| classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| gutterBottom | bool | false | Se true, o texto terá uma margem inferior. |
| noWrap | bool | false | 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). |
| paragraph | bool | false | Se verdadeiro, o elemento será um elemento de parágrafo. |
| sx | Array<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. |
| variantMapping | object | { 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 regra | Classe global | Descrição |
|---|---|---|
| root | .MuiTypography-root | Estilos aplicados ao elemento raiz. |
| body2 | .MuiTypography-body2 | Estilos aplicados para o elemento raiz se variant="body2". |
| body1 | .MuiTypography-body1 | Estilos aplicados para o elemento raiz se variant="body1". |
| caption | .MuiTypography-caption | Estilos aplicados para o elemento raiz se variant="caption". |
| button | .MuiTypography-button | Estilos aplicados para o elemento raiz se variant="button". |
| h1 | .MuiTypography-h1 | Estilos aplicados para o elemento raiz se variant="h1". |
| h2 | .MuiTypography-h2 | Estilos aplicados para o elemento raiz se variant="h2". |
| h3 | .MuiTypography-h3 | Estilos aplicados para o elemento raiz se variant="h3". |
| h4 | .MuiTypography-h4 | Estilos aplicados para o elemento raiz se variant="h4". |
| h5 | .MuiTypography-h5 | Estilos aplicados para o elemento raiz se variant="h5". |
| h6 | .MuiTypography-h6 | Estilos aplicados para o elemento raiz se variant="h6". |
| subtitle1 | .MuiTypography-subtitle1 | Estilos aplicados para o elemento raiz se variant="subtitle1". |
| subtitle2 | .MuiTypography-subtitle2 | Estilos aplicados para o elemento raiz se variant="subtitle2". |
| overline | .MuiTypography-overline | Estilos aplicados para o elemento raiz se variant="overline". |
| inherit | .MuiTypography-inherit | Estilos aplicados para o elemento raiz se variant="inherit". |
| alignLeft | .MuiTypography-alignLeft | Estilos aplicados para o elemento raiz se align="left". |
| alignCenter | .MuiTypography-alignCenter | Estilos aplicados para o elemento raiz se align="center". |
| alignRight | .MuiTypography-alignRight | Estilos aplicados para o elemento raiz se align="right". |
| alignJustify | .MuiTypography-alignJustify | Estilos aplicados para o elemento raiz se align="justify". |
| noWrap | .MuiTypography-noWrap | Estilos aplicados para o elemento raiz se nowrap={true}. |
| gutterBottom | .MuiTypography-gutterBottom | Estilos aplicados para o elemento raiz se gutterBottom={true}. |
| paragraph | .MuiTypography-paragraph | Estilos aplicados para o elemento raiz se paragraph={true}. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- Com um nome de classe global.
- Com um nome de regra como parte da propriedade
styleOverridesdo componente em um tema personalizado.