score:0

i recommend looking at mui's documentation example: https://v4.mui.com/components/steppers/#customizedsteppers.js


you will need to create custom components to represent the styles you want.
const customeconnector = withstyles({
   active: {
      '& $line': {
          bordercolor: '#784af4',
       },
   },
  completed: {
     '& $line': {
  bordercolor: '#784af4',
     },
   },
})(stepconnector);

function customestepicon(props) {
  const classes = // create styles
  const { active, completed } = props;

  return (
    <div
      classname={clsx(classes.root, {
        [classes.active]: active,
      })}
    >
      {completed ? <check classname={classes.completed} /> : <div classname={classes.circle} />}
    </div>
  );
}

 <stepper alternativelabel activestep={activestep} connector={<customconnector />}>
    {steps.map((label) => (
      <step key={label}>
        <steplabel stepiconcomponent={customstepicon}>{label}</steplabel>
      </step>
    ))}
  </stepper>

update
here is an updated link to the v5 implementation: https://mui.com/components/steppers/#customized-horizontal-stepper


Related Query

More Query from same tag