How do you change the Stepper color on React Material UI?

前端 未结 7 1255
不知归路
不知归路 2021-02-14 01:17

In the screenshot above, I am trying to change the step color to either: green for correct, yellow for in-progress and red for incorrect.

How could I do this?

7条回答
  •  栀梦
    栀梦 (楼主)
    2021-02-14 01:21

    This is a way I used to override it using classes overrides - all other properties remain the same.

    const styles = theme => ({
      labelContainer: {
        "& $alternativeLabel": {
          marginTop: 0
        }
      },
      step: {
        "& $completed": {
          color: "lightgreen"
        },
        "& $active": {
          color: "pink"
        },
        "& $disabled": {
          color: "red"
        }
      },
      alternativeLabel: {},
      active: {}, //needed so that the &$active tag works
      completed: {},
      disabled: {},
      labelContainer: {
        "& $alternativeLabel": {
          marginTop: 0
        }
      },
    });
    
    class myStepper extends Component {
    
     render() {
       const { classes } = this.props;
       return(
            
              {this.state.numberTasks.map(label => {
                return (
                  
            
              {this.state.labels[label - 1]} //label value here
            
                  
                );
              })}
            
    );
    }
    
    export default withStyles(styles)(myStepper);
    

提交回复
热议问题