Pular para o conteúdo

CardHeader API

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

Importação

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

Propriedades

Props of the nativo component are also available.

NomeTipoPadrãoDescrição
actionnode
The action to display in the card header.
avatarnode
The Avatar for the Card Header.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
disableTypographyboolfalse
If true, subheader and title won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the title text, and optional subheader text with the Typography component.
subheadernode
O conteúdo do componente.
subheaderTypographyPropsobject
These props will be forwarded to the subheader (as long as disableTypography is not true).
sxfunc
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
titlenode
O conteúdo do componente.
titleTypographyPropsobject
These props will be forwarded to the title (as long as disableTypography is not true).

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiCardHeader-rootEstilos aplicados ao elemento raiz.
avatar.MuiCardHeader-avatarEstilos aplicados a the avatar element.
action.MuiCardHeader-actionEstilos aplicados a the action element.
content.MuiCardHeader-contentEstilos aplicados a the content wrapper element.
title.MuiCardHeader-titleEstilos aplicados a the title Typography element.
subheader.MuiCardHeader-subheaderEstilos aplicados a the subheader Typography element.

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

Demonstrações