How to do an Stepper with progress bars Material-ui

Question

I'm working on a Stepper and I want to add a progress bar between each step. I'm using Material-ui Stepper connector to achieve this. But same connector is applied to all steps. That's not a real problem because I can do it using jss.

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

The real problem here is that I don't know how can I add the rule to just one of the bars using jss.

If there's a better way to add the progress bars, great. I'm just sharing mine to give you more context.

This is what I have:

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

Answer 1

The Material-ui stepper component was not adjusting to my needs and it was becoming an obstacle. So I created my own Stepper component.

I did a quick research and found this Simple Stepper by Vicente Lyrio and made my custom component from that code. Here's my result: Stepper with progress bars by Jhonatan Zuluaga You can add as many steps as you want to and it's going to work. Here's the component:

 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>
  )
}

Answer 2

For anyone looking to do this with MUI-5, I have adjusted Jhonatan Zuluaga answer above, which included updating to the new version, and styling options: stepper-progress