Material-ui: How can I customize the stepper active state?

[Anugraha123]

<StepIcon classes={{ root: classes.stepIcon, active: classes.stepIconActive, }} > </StepIcon>

active have no response

[oliviertassinari]

You need to increase the specificity.

[Anugraha123]

<StepIcon
    classes={{
        root: classes.stepIcon,
        active: classes.stepIconActive, // this api is not working
    }}
>
</StepIcon>

css api 'active' doesn't work

and the eror is

index.js:2177 Warning: Material-UI: the key `active` provided to the classes property is not implemented in StepIcon. You can only override one of the following: root,completed

[oliviertassinari]

@Anugraha123 You need to upgrade your dependency. How about the following example:

import React from "react";
import { withStyles } from "material-ui/styles";
import { StepIcon } from "material-ui/Stepper";

const styles = theme => ({
  root: {
    color: "blue",
    "&$active": {
      color: "green"
    },
    "&$completed": {
      color: "red"
    }
  },
  active: {},
  completed: {}
});

function Demo(props) {
  return (
    <div>
      <StepIcon icon="1" classes={props.classes} />
      <StepIcon icon="2" active classes={props.classes} />
      <StepIcon icon="3" completed classes={props.classes} />
    </div>
  );
}

export default withStyles(styles)(Demo);

https://codesandbox.io/s/8y5zkqxp32

[oliviertassinari]

Maybe we need to add a demo in the documentation.

[elmeerr]

@oliviertassinari I know that is a closed issue but as I came across trying to figure out my problem I think it's worth to mention:

using the api as @Anugraha123 mentioned does not work properly but in my case is because the active from root overrides the custom active. Check

const styles = theme => {
    return ({
        active: {
            color: theme.palette.secondary.main
        },
        text: {
            fill: theme.palette.getContrastText(theme.palette.secondary.main)
        }
    })
}

using like this:

         <Step key={label} {...props}>
                                <StepLabel
                                    {...labelProps}
                                    StepIconProps={{
                                        classes: {
                                            active: classes.active,
                                            text: classes.text
                                        }
                                    }}
                                >
                                    {label}
                                </StepLabel>
                            </Step>

the custom textworks properly.

and btw, your solution works also for me.

if what I mentioned it is indeed a bug, I can open an issue so that you guys can keep track.

Kind regards,

[oliviertassinari]

@elmeerr You are having an issue with specificity. We are considering the active state, an internal state, in order to ease the customization, internal states have an higher specificity, this way, you can change the active state without having to redefine all the other states (cherry-pick). It's better explained in https://material-ui.com/customization/overrides/#overriding-with-classes

[elmeerr]

@oliviertassinari thank you for the explanation. It helps a lot.

[JitendraBhamidipati]

Have you tried a custom SVG Icon and tried too override the active classes. Its not working

[MrWittman612]

this is how I did it::

const useStyles = makeStyles((theme) => ({
  stepper: {
    width: '100%',
  },
  heading: {
    fontSize: '1.7em',
  },
  stepperHeader: {
    color: 'white',
    backgroundColor: setToMeterColor(theme),
  },
  stepButton: {
    '& .MuiStepIcon-active': {
      opacity: 1,
      color: setToMeterColor(theme),
    },
  },
  stepIcon: {
    color: setToMeterColor(theme),
    opacity: 0.8,
  },
  stepIconText: {
    display: 'none',
  },
}));   


 {steps.map((label, index) => (
                <Step key={label}>
                  <StepButton
                    classes={{
                      root: classes.stepButton,
                    }}
                    onClick={handleStep(index)}
                  >
                    <StepLabel
                      StepIconProps={{
                        classes: {
                          root: classes.stepIcon,
                          text: classes.stepIconText,
                        },
                      }}
                    >
                      {label}
                    </StepLabel>
                  </StepButton>
                  <StepContent>
                    <Typography>
                      {getStepContent(activeStep, {meter})}
                    </Typography>
                  </StepContent>
                </Step>