跳转到内容

Stepper API

想要学习更多组件属性和 CSS API,可以查阅 React Stepper 组件的 API 文档。

导入

import Stepper from '@mui/material/Stepper';
// 或
import { Stepper } from '@mui/material';
你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

组件名称

在主题中,名称“MuiStepper”可用于提供默认属性(props),或者样式覆盖

属性

原生(Native) 组件的属性也是可用的。

名称类型默认值描述
activeStepinteger0
Set the active step (zero based index). Set to -1 to disable all the steps.
alternativeLabelboolfalse
If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon.
childrennode
Two or more <Step /> components.
classesobject
Override or extend the styles applied to the component. See CSS API below for more details.
componentelementType
connectorelement<StepConnector />
An element to be placed between each step.
nonLinearboolfalse
If set the Stepper will not assist in controlling steps for linear flow.
orientation'horizontal'
| 'vertical'
'horizontal'
The group orientation (layout flow direction).
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.

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

CSS

规则名称全局类名描述
root.MuiStepper-rootStyles applied to the root element.
horizontal.MuiStepper-horizontalStyles applied to the root element if orientation="horizontal".
vertical.MuiStepper-verticalStyles applied to the root element if orientation="vertical".
alternativeLabel.MuiStepper-alternativeLabelStyles applied to the root element if alternativeLabel={true}.

您可以使用组件自定义选项对组件进行个性化:

演示项目