Material UI水平Stepper无法添加内容，求解决方案或替代组件

一、修复Material UI水平Stepper的内容展示 #

你的代码问题主要出在错误使用StepContent以及重复渲染按钮组上。水平Stepper的内容不需要放在StepContent里，应该将内容区域独立出来，根据当前激活的步骤动态渲染对应内容。以下是修正后的完整代码：

import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { Grid } from '@mui/material';

const steps = ["个人信息", "教育背景", "地址信息"];

function getStepContent(number) {
  switch (number) {
    case 0:
      return (
        <>
          <Grid align="center">
            <form className="form-group">
              <label>First Name</label>
              <input type="text" placeholder="First Name" />
              <br />
              <label>Last Name</label>
              <input type="text" placeholder="Last Name" />
            </form>
          </Grid>
        </>
      );
    case 1:
      return (
        <form className="form-group">
          <label>High School Percentage</label>
          <input type="number" placeholder="High School Percentage" />
          <br />
          <label>Graduation percentage</label>
          <input type="number" placeholder="Graduation Percentage" />
        </form>
      );
    case 2:
      return (
        <form className="form-group">
          <label>Permanent Address</label>
          <input type="text" placeholder="Permanent Address" />
          <br />
          <label>Temporary Address</label>
          <input type="text" placeholder="Temporary Address" />
        </form>
      );
    default:
      return '';
  }
}

export default function EdenSignUp() {
  const [activeStep, setActiveStep] = React.useState(0);
  const [skipped, setSkipped] = React.useState(new Set());

  const isStepOptional = (step) => {
    return step === 1;
  };

  const isStepSkipped = (step) => {
    return skipped.has(step);
  };

  const handleNext = () => {
    let newSkipped = skipped;
    if (isStepSkipped(activeStep)) {
      newSkipped = new Set(newSkipped.values());
      newSkipped.delete(activeStep);
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setSkipped(newSkipped);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleSkip = () => {
    if (!isStepOptional(activeStep)) {
      throw new Error("You can't skip a step that isn't optional.");
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setSkipped((prevSkipped) => {
      const newSkipped = new Set(prevSkipped.values());
      newSkipped.add(activeStep);
      return newSkipped;
    });
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <Box sx={{ width: '100%', maxWidth: 800, margin: '0 auto', padding: 3 }}>
      {/* 水平Stepper头部 */}
      <Stepper activeStep={activeStep} alternativeLabel>
        {steps.map((label, index) => {
          const stepProps = {};
          const labelProps = {};
          if (isStepOptional(index)) {
            labelProps.optional = (
              <Typography variant="caption">可选</Typography>
            );
          }
          if (isStepSkipped(index)) {
            stepProps.completed = false;
          }
          return (
            <Step key={label} {...stepProps}>
              <StepLabel {...labelProps}>{label}</StepLabel>
            </Step>
          );
        })}
      </Stepper>

      {/* 步骤内容区域 */}
      {activeStep === steps.length ? (
        <React.Fragment>
          <Typography sx={{ mt: 2, mb: 1 }}>所有步骤已完成！</Typography>
          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
            <Box sx={{ flex: '1 1 auto' }} />
            <Button onClick={handleReset}>重置</Button>
          </Box>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <Box sx={{ mt: 4, mb: 2, padding: 2, border: '1px solid #eee', borderRadius: 1 }}>
            {getStepContent(activeStep)}
          </Box>
          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
            <Button
              color="inherit"
              disabled={activeStep === 0}
              onClick={handleBack}
              sx={{ mr: 1 }}
            >
              返回
            </Button>
            <Box sx={{ flex: '1 1 auto' }} />
            {isStepOptional(activeStep) && (
              <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
                跳过
              </Button>
            )}
            <Button variant="contained" color="primary" onClick={handleNext}>
              {activeStep === steps.length - 1 ? '完成' : '下一步'}
            </Button>
          </Box>
        </React.Fragment>
      )}
    </Box>
  );
}

关键修复点：

• 移除了StepContent组件，将内容放在Stepper下方独立区域
• 删除了重复的按钮组，只保留底部的一组操作按钮
• 修正alternativeLabel='true'为布尔值属性alternativeLabel
• 优化了布局，添加了内容区域的边框和内边距，提升视觉效果

二、Bootstrap生态的Stepper替代方案 #

Bootstrap官方没有内置Stepper组件，但可以通过以下方式实现：

• 第三方组件库：使用基于React Bootstrap封装的组件，直接调用即可生成水平步骤条
• 手动实现：用Bootstrap的progress组件做进度条，配合card组件展示步骤内容，自己控制步骤切换逻辑

三、其他可选组件库 #

如果不想局限于MUI或Bootstrap，还可以选择：

• Ant Design的Steps组件：内置水平/垂直模式，支持自定义内容，集成成本低
• Chakra UI的Steps组件：风格简约，支持响应式布局

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