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

Link API

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

Importação

import Link from '@mui/material/Link';
// ou
import { Link } 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 MuiLink can be used when providing default props or style overrides in the theme.

Propriedades

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

NomeTipoPadrãoDescrição
childrennode
O conteúdo do componente.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
colorany'primary'
The color of the link.
componentelement type
The component used for the root node. Either a string to use a HTML element or a component.
⚠️ Needs to be able to hold a ref.
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.
TypographyClassesobject
classes prop applied to the Typography element.
underline'always'
| 'hover'
| 'none'		'always'
Controls when the link should have an underline.
variant'body1'
| 'body2'
| 'button'
| 'caption'
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'inherit'
| 'overline'
| 'subtitle1'
| 'subtitle2'
| string		'inherit'
Applies the theme typography styles.

O ref é encaminhado para o elemento raiz.

Herança

While not explicitly documented above, the props of the Typography component are also available on Link. You can take advantage of this to target nested components.

CSS

Nome da regraClasse globalDescrição
root.MuiLink-rootEstilos aplicados ao elemento raiz.
underlineNone.MuiLink-underlineNoneEstilos aplicados para o elemento raiz se underline="none".
underlineHover.MuiLink-underlineHoverEstilos aplicados para o elemento raiz se underline="hover".
underlineAlways.MuiLink-underlineAlwaysEstilos aplicados para o elemento raiz se underline="always".
button.MuiLink-buttonEstilos aplicados para o elemento raiz se component="button".
focusVisible.Mui-focusVisiblePseudo-class aplicada a o elemento raiz se the link is keyboard focused.

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

Demonstrações