Question

我想覆盖marginLab：在StepLabel的此实现中出现的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不会被覆盖。 :(

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

Answer 1

似乎是这样的-将此答案归功于Material-UI Style Override?

放入一个空的AlternativeLabel：{}，以覆盖＆$ alternativeLabel属性：

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

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

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

Material-ui覆盖StepLabel嵌套属性

1 个答案: