这个答案展示了如何改变单个StepIcon的颜色

假设在组件外部有一个函数呈现Stepper，该函数返回一个包含步骤标签及其对应图标颜色的数组：

function getStepLabels() {
  return [
    {
      label: "Select campaign settings",
      color: "red"
    },
    {
      label: "Create an ad group",
      color: "blue"
    },
    {
      label: "Create an ad",
      color: "green"
    }
  ];
}

你可以通过makeStyles函数使用material-ui的Hook API为每个标签图标生成类（如果你使用的是类组件，你可能想看看withStyles函数）：

const useIconStyles = makeStyles(
  (() => {
    return getStepLabels().reduce((styles, step, index) => {
      styles[index] = { color: `${step.color} !important` };
      return styles;
    }, {});
  })()
);

并将生成的钩子添加到组件中：const iconClasses = useIconStyles();
在渲染步进器时，您可以像这样使用生成的类：

[...]

<Step key={label} {...stepProps}>
    <StepLabel
        {...labelProps}
         StepIconProps={{ classes: { root: iconClasses[index] } }}
    >
         {label}
    </StepLabel>
</Step>

[...]

下面是一个工作示例：

如果您仔细查看Stepper组件的渲染输出，您会注意到StepLabel和StepConnector是兄弟组件。这意味着您可以使用CSS :nth-child()伪类选择特定的连接器。如果你想在第一步的标签后选择连接器，你可以使用选择器:nth-child(2)。对于第二步标签之后的连接器，其应为:nth-child(4)。
如果你有一个像这样的步骤标签数组：

[
  {
    label: "First label",
    connectorColor: "red"
  },
  {
    label: "Second label",
    connectorColor: "green"
  },
  {
    label: "Third label"
  }
];

你可以将这个数组传递给一个由makeStyles函数创建的material-ui样式钩子，并动态生成所有不同的CSS选择器来为每个连接器设置样式：

const useConnectorStyles = makeStyles({
  stepConnector: steps => {
    const styles = {};

    steps.forEach(({ connectorColor }, index) => {
      if (index < steps.length - 1) {
        styles[`&:nth-child(${2 * index + 2})`] = { color: connectorColor };
      }
    });

    return styles;
  },
  stepConnectorLine: {
    borderColor: "currentColor"
  }
});

现在在组件中使用生成的样式钩子：const connectorClasses = useConnectorStyles(stepLabels);并将connector属性提供给Stepper组件：

connector={
    <StepConnector
        classes={{
            root: connectorClasses.stepConnector,
            line: connectorClasses.stepConnectorLine
        }}
    />
}

下面是一个工作示例：