Material-ui Override StepLabel 嵌套属性答案

【问题标题】：Material-ui Override StepLabel nested propertyMaterial-ui Override StepLabel 嵌套属性
【发布时间】：2019-04-08 10:06:09
【问题描述】：

我想覆盖这个 StepLabel 实现中出现的 marginTop: 16 属性：

  label: {
    color: theme.palette.text.secondary,
    '&$active': {
      color: theme.palette.text.primary,
      fontWeight: 500,
    },
    '&$completed': {
      color: theme.palette.text.primary,
      fontWeight: 500,
    },
    '&$alternativeLabel': {
      textAlign: 'center',
      marginTop: 16,
    },
    '&$error': {
      color: theme.palette.error.main,
    },
  },

这样我就得到了期望的结果：

但我一生都无法弄清楚如何......这是我的实现：

  <StepLabel
         classes={{
            root: classes.root,
            labelContainer: classes.labelContainer,
            label: classes.myLabel
         }}
       >
         {this.state.labels[label - 1]}
  </StepLabel>

这是课程：

    const styles = theme => ({
      root: {
        marginTop: 0,
        padding: 0,
        "& $alternativeLabel": {
          marginTop: 0
        }
      },
      labelContainer: {
        backgroundColor: "green",
        marginTop: 0,
        "& $alternativeLabel": {
          marginTop: 0
        }
      },
      myLabel: {
        backgroundColor: "red",
        marginTop: 0,
        "& $alternativeLabel": {
          marginTop: 0
        }
      },
  });

结果 - marginTop 不会被覆盖。 :(

更多信息 - 我要覆盖的属性：

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

似乎这样做的方式是这样的 - 归功于这个答案Material-UI Style Override?

放一个空的alternativeLabel：{}，这样属性&$alternativeLabel就会被覆盖：

const styles = theme => ({
      labelContainer: {
        "& $alternativeLabel": {
          marginTop: 0
        }
      },
      alternativeLabel: {}, 
});

然后在你的组件中这样调用它：

        <StepLabel
          classes={{
            alternativeLabel: classes.alternativeLabel,
            labelContainer: classes.labelContainer
          }}
        >

【讨论】：