Link API
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
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 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:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.