Pular para o conteúdo

Step API

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

Importação

import Step from '@mui/material/Step';
// ou
import { Step } 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 MuiStep 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
activeboolfalse
Sets the step as active. Is passed to child components.
childrennode
Should be Step sub-components such as StepLabel, StepContent.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
completedboolfalse
Mark the step as completed. Is passed to child components.
disabledboolfalse
Mark the step as disabled, will also disable the button if StepButton is a child of Step. Is passed to child components.
expandedboolfalse
Expand the step.
indexinteger
The position of the step. The prop defaults to the value inherited from the parent Stepper component.
lastboolfalse
If true, the Step is displayed as rendered last. The prop defaults to the value inherited from the parent Stepper component.
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.MuiStep-rootEstilos aplicados ao elemento raiz.
horizontal.MuiStep-horizontalEstilos aplicados para o elemento raiz se orientation="horizontal".
vertical.MuiStep-verticalEstilos aplicados para o elemento raiz se orientation="vertical".
alternativeLabel.MuiStep-alternativeLabelEstilos aplicados para o elemento raiz se alternativeLabel={true}.
completed.Mui-completedPseudo-class aplicada a o elemento raiz se completed={true}.

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

Demonstrações