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';
Nome do componente
The nameMuiLink
can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente Typography também estão disponíveis.
Nome | Tipo | Padrão | Descrição |
---|---|---|---|
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. | |
color | any | 'primary' | The color of the link. |
component | element 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. | |
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. | |
TypographyClasses | object | 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
Embora não explicitamente documentado acima, as propriedades do componente Typography também estão disponíveis em Link. Você pode tirar vantagem disso para manipular componentes aninhados.CSS
Nome da regra | Classe global | Descrição |
---|---|---|
root | .MuiLink-root | Estilos aplicados ao elemento raiz. |
underlineNone | .MuiLink-underlineNone | Estilos aplicados para o elemento raiz se underline="none" . |
underlineHover | .MuiLink-underlineHover | Estilos aplicados para o elemento raiz se underline="hover" . |
underlineAlways | .MuiLink-underlineAlways | Estilos aplicados para o elemento raiz se underline="always" . |
button | .MuiLink-button | Estilos aplicados para o elemento raiz se component="button" . |
focusVisible | .Mui-focusVisible | Pseudo-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:
- Com um nome de classe global.
- Com um nome de regra como parte da propriedade
styleOverrides
do componente em um tema personalizado.