如何使用React Material UI实现参考图所示的自定义组件

完全可以用React Material UI实现该组件，实现难度很低，非常适合React初学者上手。

1. 核心组件选型 #

这个是典型的多步骤引导组件，Material UI提供了现成的封装组件可以直接使用，不需要从零开发样式和基础逻辑：

• 左侧的步骤进度条直接用内置的Stepper组件，自带垂直布局、已完成/进行中/未完成状态标记、连接线样式，完全匹配示意图的需求
• 右侧的步骤内容区域用Box或者Card组件包裹即可，只需要维护一个状态变量控制当前显示的步骤内容
• 底部的操作按钮用Button组件，根据当前步骤的状态控制按钮的禁用、显示逻辑即可

2. 基础代码逻辑 #

第一步：定义步骤配置 #

先把你要做的所有步骤的标题、对应的内容组件提前定义好，示例结构：

const steps = [
  { label: '选择基础模板', content: <TemplateSelectForm /> },
  { label: '配置组件参数', content: <ConfigForm /> },
  { label: '确认配置信息', content: <ConfirmCard /> },
  { label: '生成最终结果', content: <ResultCard /> },
]

第二步：维护步骤状态 #

用React的useState钩子维护当前激活的步骤下标：

import { useState } from 'react';

// 初始值设为0，默认展示第一个步骤
const [activeStep, setActiveStep] = useState(0);

第三步：实现切换逻辑 #

给底部按钮加对应的点击回调即可：

• 点击下一步：setActiveStep(prev => prev + 1)
• 点击上一步：setActiveStep(prev => prev - 1)
• 点击完成：触发你自己的提交、生成数据等业务逻辑即可

3. 样式调整 #

如果默认的Stepper样式和你的需求有出入，直接用MUI自带的sx属性自定义样式即可，比如调整步骤圆点的颜色、大小，连接线的粗细、颜色，都可以几行代码完成适配。

你可以直接从垂直步骤条的基础示例代码入手调整，把自己的业务内容填进去即可，整体实现成本很低，不需要复杂的自定义逻辑。

内容的提问来源于stack exchange，提问作者Zenixo