Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I customize the stepper active state?

See original GitHub issue

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

active have no response

Issue Analytics

State:
Created 6 years ago
Comments:10 (7 by maintainers)

Top GitHub Comments

15reactions

oliviertassinaricommented, Mar 12, 2018

@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 capture d ecran 2018-03-12 a 13 35 47

1reaction

MrWittman612commented, Jun 27, 2020

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>