Step API
API documentation for the React Step component. Learn about the available props and the CSS API.
Import
import Step from '@mui/material/Step';
// or
import { Step } from '@mui/material';Component name
The nameMuiStep can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| Name | Type | Default | Description | 
|---|---|---|---|
| active | bool | false | Sets the step as active. Is passed to child components.  | 
| children | node | Should be  Step sub-components such as StepLabel, StepContent. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details.  | |
| completed | bool | false | Mark the step as completed. Is passed to child components.  | 
| disabled | bool | false | If  true, the step is disabled, will also disable the button if StepButton is a child of Step. Is passed to child components. | 
| expanded | bool | false | Expand the step.  | 
| index | integer | The position of the step. The prop defaults to the value inherited from the parent Stepper component.  | |
| last | bool | false | If  true, the Step is displayed as rendered last. The prop defaults to the value inherited from the parent Stepper component. | 
| 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.  | 
The
ref is forwarded to the root element.CSS
| Rule name | Global class | Description | 
|---|---|---|
| root | .MuiStep-root | Styles applied to the root element. | 
| horizontal | .MuiStep-horizontal | Styles applied to the root element if orientation="horizontal". | 
| vertical | .MuiStep-vertical | Styles applied to the root element if orientation="vertical". | 
| alternativeLabel | .MuiStep-alternativeLabel | Styles applied to the root element if alternativeLabel={true}. | 
| completed | .Mui-completed | State class applied to the root element if completed={true}. | 
You can override the style of the component using one of these customization options:
- With a global class name.
 - With a rule name as part of the component's 
styleOverridesproperty in a custom theme.