Pular para o conteúdo

StepLabel API

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

Importação

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

Propriedades

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

NomeTipoPadrãoDescrição
childrennode
In most cases will simply be a string containing a title for the label.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
componentsProps{ label?: object }{}
The props used for each slot inside.
errorboolfalse
Mark the step as failed.
iconnode
Override the default label of the step icon.
optionalnode
The optional node to display.
StepIconComponentelementType
The component to render in place of the StepIcon.
StepIconPropsobject
Props applied to the StepIcon element.
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.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiStepLabel-rootEstilos aplicados ao elemento raiz.
horizontal.MuiStepLabel-horizontalEstilos aplicados para o elemento raiz se orientation="horizontal".
vertical.MuiStepLabel-verticalEstilos aplicados para o elemento raiz se orientation="vertical".
label.MuiStepLabel-labelEstilos aplicados a the Typography component that wraps `children`.
active.Mui-activePseudo-class aplicada a the `Typography` component se active={true}.
completed.Mui-completedPseudo-class aplicada a the `Typography` component se completed={true}.
error.Mui-errorPseudo-class aplicada a the root element and `Typography` component se error={true}.
disabled.Mui-disabledPseudo-class aplicada a the root element and `Typography` component se disabled={true}.
iconContainer.MuiStepLabel-iconContainerEstilos aplicados a the `icon` container element.
alternativeLabel.MuiStepLabel-alternativeLabelPseudo-class aplicada a the root and icon container and `Typography` se alternativeLabel={true}.
labelContainer.MuiStepLabel-labelContainerEstilos aplicados a the container element which wraps `Typography` and `optional`.

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

Demonstrações