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';Nome do componente
The nameMuiStepLabel can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente nativo também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | node | In most cases will simply be a string containing a title for the label. | |
| classes | object | 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. |
| error | bool | false | Mark the step as failed. |
| icon | node | Override the default label of the step icon. | |
| optional | node | The optional node to display. | |
| StepIconComponent | elementType | The component to render in place of the StepIcon. | |
| StepIconProps | object | Props applied to the StepIcon element. | |
| 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. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiStepLabel-root | Estilos aplicados ao elemento raiz. |
| horizontal | .MuiStepLabel-horizontal | Estilos aplicados para o elemento raiz se orientation="horizontal". |
| vertical | .MuiStepLabel-vertical | Estilos aplicados para o elemento raiz se orientation="vertical". |
| label | .MuiStepLabel-label | Estilos aplicados a the Typography component that wraps `children`. |
| active | .Mui-active | Pseudo-class aplicada a the `Typography` component se active={true}. |
| completed | .Mui-completed | Pseudo-class aplicada a the `Typography` component se completed={true}. |
| error | .Mui-error | Pseudo-class aplicada a the root element and `Typography` component se error={true}. |
| disabled | .Mui-disabled | Pseudo-class aplicada a the root element and `Typography` component se disabled={true}. |
| iconContainer | .MuiStepLabel-iconContainer | Estilos aplicados a the `icon` container element. |
| alternativeLabel | .MuiStepLabel-alternativeLabel | Pseudo-class aplicada a the root and icon container and `Typography` se alternativeLabel={true}. |
| labelContainer | .MuiStepLabel-labelContainer | Estilos 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:
- Com um nome de classe global.
- Com um nome de regra como parte da propriedade
styleOverridesdo componente em um tema personalizado.