更新：这是最新版本 3 的正确方法。您只需要通过引用将覆盖正确添加到您的主题中MuiStepIcon：

const theme = createMuiTheme({
  overrides: {
   MuiStepIcon: {
    root: {
      '&$completed': {
        color: 'pink',
      },
      '&$active': {
        color: 'red',
      },
    },
    active: {},
    completed: {},
  },
  palette: {
    ...
  }
})

老问题，但以防万一有人在看。

您需要编辑主题并将其包装在 getMuiTheme

import getMuiTheme from 'material-ui/styles/getMuiTheme'

const muiTheme = getMuiTheme({
    stepper: {
        iconColor: 'green' // or logic to change color
    }
})

<MuiThemeProvider muiTheme={muiTheme}>
    <Stepper>
        ...
    </Stepper>
</MuiThemeProvider>

请参阅https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js以获取组件的完整列表及其默认颜色模式。

您将看到您可以在每个组件的基础上覆盖颜色和/或更改整体主题颜色。

这是我过去使用类覆盖来覆盖它的一种方式 - 所有其他属性保持不变。

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(
        <Stepper
          activeStep={activeStep}
          alternativeLabel
          connector={connector}
          classes={{
            root: classes.root
          }}
        >
          {this.state.numberTasks.map(label => {
            return (
              <Step
                key={label}
                classes={{
                  root: classes.step,
                  completed: classes.completed,
                  active: classes.active
                }}
         >
        <StepLabel
          classes={{
            alternativeLabel: classes.alternativeLabel,
            labelContainer: classes.labelContainer
          }}
          StepIconProps={{
            classes: {
              root: classes.step,
              completed: classes.completed,
              active: classes.active,
              disabled: classes.disabled
            }
          }}
        >
          {this.state.labels[label - 1]} //label value here
        </StepLabel>
              </Step>
            );
          })}
        </Stepper>
);
}

export default withStyles(styles)(myStepper);

您可以为该属性设置 classesStepIconProps属性：

JavaScript 样式的一部分

...
icon:{
  fill:"green",
},
text:{
  fill:"white",
},
...

<Step key="someKey">
    <StepLabel StepIconProps={{
        classes: {
            active: classes.icon,
            text:   classes.text,
        }
    }}>
    Some Text
    </StepLabel>
</Step>

然后您的样式应该使用!importantCSS 规则覆盖默认主题颜色：

const styles = theme => ({
  icon: {
    color: "red !important"
  },
});