AppBar API
Documentação da API para o componente React AppBar . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import AppBar from '@mui/material/AppBar';
// ou
import { AppBar } from '@mui/material';Nome do componente
The nameMuiAppBar can be used when providing default props or style overrides in the theme.Propriedades
Props of the Paper component are also available.
| 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 | 'default' | 'inherit' | 'primary' | 'secondary' | 'transparent' | string | 'primary' | A cor do componente. Ela da suporte para as cores do tema que fazem sentido para este componente. |
| enableColorOnDark | bool | false | If true, the color prop is applied in dark mode. |
| position | 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky' | 'fixed' | O tipo de posicionamento. O comportamento das diferentes opções é descrito na documentação MDN web docs. Nota: sticky não é universalmente suportado e será modificado para static quando indisponível. |
| sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
O
ref é encaminhado para o elemento raiz.Herança
Embora não explicitamente documentado acima, as propriedades do componente Paper também estão disponíveis em AppBar. Você pode tirar vantagem disso para manipular componentes aninhados.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiAppBar-root | Estilos aplicados ao elemento raiz. |
| positionFixed | .MuiAppBar-positionFixed | Estilos aplicados para o elemento raiz se position="fixed". |
| positionAbsolute | .MuiAppBar-positionAbsolute | Estilos aplicados para o elemento raiz se position="absolute". |
| positionSticky | .MuiAppBar-positionSticky | Estilos aplicados para o elemento raiz se position="sticky". |
| positionStatic | .MuiAppBar-positionStatic | Estilos aplicados para o elemento raiz se position="static". |
| positionRelative | .MuiAppBar-positionRelative | Estilos aplicados para o elemento raiz se position="relative". |
| colorDefault | .MuiAppBar-colorDefault | Estilos aplicados para o elemento raiz se color="default". |
| colorPrimary | .MuiAppBar-colorPrimary | Estilos aplicados para o elemento raiz se color="primary". |
| colorSecondary | .MuiAppBar-colorSecondary | Estilos aplicados para o elemento raiz se color="secondary". |
| colorInherit | .MuiAppBar-colorInherit | Estilos aplicados para o elemento raiz se color="inherit". |
| colorTransparent | .MuiAppBar-colorTransparent | Estilos aplicados para o elemento raiz se color="transparent". |
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.