reactjs - 如何用进度条做一个步进器 Material-ui

Question

我正在开发步进器，我想在每个步骤之间添加一个进度条。我正在使用 Material-ui Stepper 连接器来实​​现这一点。但是相同的连接器适用于所有步骤。这不是一个真正的问题，因为我可以使用 jss 来做到这一点。

bar: { transform: "translateX(-101%) !important" } // This rule can control progress bars

这里真正的问题是我不知道如何使用 jss 将规则添加到其中一个栏。

如果有更好的方法来添加进度条，那就太好了。我只是分享我的给你更多的背景。

这就是我所拥有的：

代码：https ://codesandbox.io/s/determined-diffie-636ss?file=/src/App.js

标签： reactjsmaterial-uijss

Answer 1

Material-ui 步进器组件没有根据我的需要进行调整，它正在成为一个障碍。所以我创建了自己的 Stepper 组件。

我做了一个快速的研究，发现了 Vicente Lyrio 的这个 Simple Stepper，并用该代码制作了我的自定义组件。这是我的结果：Jhonatan Zuluaga 的带进度条的步进器您可以添加任意数量的步骤，它会起作用。这是组件：

 function CustomStepper(props) {
  const { steps, current, progress, classes } = props;
  
  function StepContent({ done, index }) {
    return done ? "✓" : index + 1;
  }

  const ProgressBar = ({ current, step, progress }) => {
    let value = 0;
    if(current+1 === step) {
      value = progress
    } else if(current >= step) {
      value = 100
    }
     
    return <LinearProgress variant="determinate" value={value} classes={{root: classes.linearProgress, bar: classes.bar}} />
  }
  
  function renderStep(label, key) {
    const { current, progress } = this;
    const done = key < current;
    const currentStep = key === current;
    const stepClasses = classNames({
      [classes.stepper__step__index]: true,
      [classes.currentStep]: currentStep,
      [classes.done]: done
    });
  
    return (
      <li className={classes.stepper__step} key={key}>
        <div className={classes.labelContainer}>
          <span className={stepClasses}>
              <StepContent done={done} index={key} />
          </span>
          <p className={classes.stepper__step__label}>{label}</p>
        </div>
        {!!key && <ProgressBar current={current} step={key} progress={progress} />}
      </li>
    )
  }

  return (
    <ul className={classes.stepper}>
      {steps.map(renderStep, { current, progress })}
    </ul>
  )
}