CODEWITHSUNDEEP
javascriptreactjsmaterial-uiuistepper
Moez Baccouche
Moez Baccouche

Reputation: 73

Use step number instead of checkmark for Mui Stepper Completed StepIcon

I'm using Mui Stepper from [email protected] in a React project.

I searched on Stackoverflow and on Github but I didn't find a way to show the number of the step when it has been completed instead of showing the Checkmark icon, which is the default behaviour of the Step Component.

This is a picture of the current behaviour

Step 1 is completed: A checkmark icon is displayed.

enter image description here

And this is the desired behaviour:

enter image description here

I just want to replace the checkmark icon with the number of the step and keep the styles unchanged.

This is my implementation of the Stepper and the styles that I used

<Stepper
    style={{ background: 'transparent', width: '100%' }}
    activeStep={activeStep}
    alternativeLabel>
      {steps.map(x => (
         <Step key={x.label}>
            <StepButton 
               disabled={!onStepAction || x.order > activeStep}
               onClick={() => onStepAction(x.order)}
            >
               <StepLabel
                 classes={{
                     label: classes.label,
                     active: classes.activeLabel,
                     completed: classes.completedLabel,
                 }}
                 StepIconProps={{
                   classes: {
                     root: classes.icon,
                     active: classes.activeIcon,
                     completed: classes.completedIcon,
                   },
                 }}>
                 {x.label}
               </StepLabel>
             </StepButton>
         </Step>
      ))}
</Stepper>

const styles = theme => ({
    root: {},
    icon: {
      borderRadius: "50%",
      border: "2px solid #ffffff",
      transform: "scale(1.2)",
      color: colorMap.white,
      '&$activeIcon': {
        color: theme.palette.primary.main,
        "& text": {
          fill: colorMap.white,
        },
      },
      "& text": {
        display: "block !important",
        fill: theme.palette.primary.main,
      },
      '&$completedIcon': {
        color: theme.palette.primary.main,
        backgroundColor: colorMap.white,
      },
    },
    activeIcon: {},
    completedIcon: {},
    label: {
      color: colorMap.white,
      '&$activeLabel': {
        fontWeight: 'bold',
        color: colorMap.white,
      },
      '&$completedLabel': {
        color: colorMap.white,
      },
    },
    activeLabel: {},
    completedLabel: {},
  });

Upvotes: 4

Views: 1795

Answers (2)

Ran Leibovitz
Ran Leibovitz

Reputation: 1

For cleaner solution (not sure if it is the best practice), <Step complete={false}/>

Upvotes: 0

Yassine El Bouchaibi
Yassine El Bouchaibi

Reputation: 239

This can be achieved by adding the StepIconComponent prop to where you make use of StepLabel like so:

<StepLabel
  classes={{
      label: classes.label,
      active: classes.activeLabel,
      completed: classes.completedLabel,
  }}
  StepIconProps={{
    classes: {
      root: classes.icon,
      active: classes.activeIcon,
      completed: classes.completedIcon,
    },
  }}
  StepIconComponent={(props) => (
    <StepIcon
      {...props}
      icon={props.icon}
      active={props.active || props.completed}
      completed={false}
    />
  )}  
>
  {x.label}
</StepLabel>

enter image description here

This will force the StepIcon component into a active and not completed state when the step is either completed or active which renders what you are after. For a more explicit solution, implement your own StepIcon component.

Upvotes: 7

Related Questions