Question

我试图使用 makeStyles 覆盖Stepper组件中的伪类：

const useStyles = makeStyles((theme) => ({
  active: {
    color: theme.palette.primary.main,
  },
  completed: {
    color: theme.palette.goodyear.status.positive,
  },
  root: {
    color: theme.palette.goodyear.grey.medium,
    fontWeight: 500,
  },
  text: {
    color: theme.palette.text.titles,
  },
  iconContainer: {
    transform: 'scale(1.667)',
  },
  label: {
    fontSize: '1.2rem',
    fontWeight: 500,
  },
}));

const StepLabel = (props) => {
  const classes = useStyles();

  return (
    <MaterialStepLabel
      classes={{
        iconContainer: classes.iconContainer,
        label: classes.label,
      }}
      StepIconProps={{
        classes: {
          active: classes.active,
          completed: classes.completed,
          root: classes.root,
          text: classes.text,
        },
      }}
      {...props}
    />
  );
};

不幸的是，在浏览器中，结果如下所示：

有由makeStyles创建的类，但是由于更具体，默认情况下将其覆盖？您还可以看到完成的类也位于根类之下，这很奇怪，因为root是处于一般状态的元素，而完成的伪类应覆盖该样式。

这里可能是什么问题，我应该如何正确使用这些类？

Answer 1

下面是the default styles for StepIcon的定义：

export const styles = (theme) => ({
  /* Styles applied to the root element. */
  root: {
    display: 'block',
    color: theme.palette.text.disabled,
    '&$completed': {
      color: theme.palette.primary.main,
    },
    '&$active': {
      color: theme.palette.primary.main,
    },
    '&$error': {
      color: theme.palette.error.main,
    },
  },
  /* Styles applied to the SVG text element. */
  text: {
    fill: theme.palette.primary.contrastText,
    fontSize: theme.typography.caption.fontSize,
    fontFamily: theme.typography.fontFamily,
  },
  /* Pseudo-class applied to the root element if `active={true}`. */
  active: {},
  /* Pseudo-class applied to the root element if `completed={true}`. */
  completed: {},
  /* Pseudo-class applied to the root element if `error={true}`. */
  error: {},
});

了解您遇到的问题的关键是更好地了解CSS specificity的工作方式。

在上述样式中，您可以看到除默认状态外的所有状态都是通过具有两个CSS类名称的声明来应用的。 &返回到root，然后$completed和$active分别参考通过completed: {}和active: {}定义的规则。正如您在检查样式时所看到的，&$completed最终解析为.MuiStepIcon-root.MuiStepIcon-completed。

具有两个类选择器（例如.MuiStepIcon-root.MuiStepIcon-completed）的CSS声明中的样式将始终胜过具有单个类选择器的CSS声明中的样式（所有样式都是这种情况）。如果特异性相同，例如您的makeStyles-root-x和makeStyles-completed-x，则最后声明的那个将获胜。您在root类之后声明了completed类（并且这种相对顺序会延续到为<head>调用生成的makeStyles中的样式表中），因此您的{{1 }}类获胜。

为使样式替代起作用，应使用与Material-UI中默认样式相同的特异性。我建议按照以下方式定义您的root和root样式：

completed

使用这种方法，您无需在const useStyles = makeStyles((theme) => ({ root: { color: theme.palette.goodyear.grey.medium, fontWeight: 500, "&.MuiStepIcon-completed": { color: theme.palette.goodyear.status.positive, }, }, }));道具内为completed指定任何内容，只需指定classes。

下面是一个基于demos（root类是最相关的部分）之一的完整工作示例：

stepIconRoot

Material-ui makeStyles默认覆盖

1 个答案: