Skip to contentSkip to content

StepAPI

React Step 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import Step from '@mui/material/Step';
// or
import { Step } from '@mui/material';

通过阅读关于最小化 bundle size 的指南,了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称类型默认值描述
activebool-

将步骤设置为激活状态。 传递给子组件。

childrennode-

应为 Step 子组件,例如 StepLabelStepContent

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息,请参阅下面的 CSS 类 API

completedbool-

将步骤标记为已完成。 传递给子组件。

componentelementType-

用于根节点的组件。 可以是用于 HTML 元素的字符串或组件。

disabledbool-

如果为 true,则禁用该步骤,如果 StepButtonStep 的子级,也将禁用该按钮。 传递给子组件。

expandedboolfalse

展开步骤。

indexinteger-

步骤的位置。 该 prop 默认为从父 Stepper 组件继承的值。

lastbool-

如果为 true,则 Step 显示为最后渲染。 该 prop 默认为从父 Stepper 组件继承的值。

sxArray<func
| object
| bool>
| func
| object
-

允许定义系统 overrides 以及附加 CSS 样式的系统 prop。

有关更多详细信息,请参阅 `sx` 页面

ref 被转发到根元素。

主题默认 props

您可以使用 MuiStep 来更改此组件的默认 props 使用主题

CSS 类

这些类名对于使用 CSS 设置样式很有用。 当触发特定状态时,它们会应用于组件的插槽。

类名规则名称描述
.Mui-completed如果 completed={true},则应用于根元素的状态类。
.MuiStep-alternativeLabelalternativeLabel如果 alternativeLabel={true},则应用于根元素的样式。
.MuiStep-horizontalhorizontal如果 orientation="horizontal",则应用于根元素的样式。
.MuiStep-rootroot应用于根元素的样式。
.MuiStep-verticalvertical如果 orientation="vertical",则应用于根元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到所需信息,请考虑查看组件的实现以获取更多详细信息。