Stepper API

API documentation for the React Stepper component. Learn about the available props, and the CSS API.

Import

import Stepper from '@mui/material/Stepper';
// 或
import { Stepper } from '@mui/material';

The name MuiStepper can be used when providing default props or style overrides in the theme.

Props of the 原生（Native） component are also available.

名称	类型	默认值	描述
activeStep	integer	0	Set the active step (zero based index). Set to -1 to disable all the steps.
alternativeLabel	bool	false	If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon.
children	node		Two or more `<Step />` components.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
connector	element	<StepConnector />	An element to be placed between each step.
nonLinear	bool	false	If set the `Stepper` will not assist in controlling steps for linear flow.
orientation	'horizontal' \| 'vertical'	'horizontal'	The group orientation (layout flow direction).
sx	func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.

ref 则会被传递到根元素中。

Rule name	Global class	描述
root	.MuiStepper-root	Styles applied to the root element.
horizontal	.MuiStepper-horizontal	Styles applied to the root element if `orientation="horizontal"`.
vertical	.MuiStepper-vertical	Styles applied to the root element if `orientation="vertical"`.
alternativeLabel	.MuiStepper-alternativeLabel	Styles applied to the root element if `alternativeLabel={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 styleOverrides property in a custom theme.