Material UI中如何通过&:active伪类修改按钮激活态样式并解决不生效问题

核心原因 #

自定义的:active 规则没有生效，本质是CSS层叠规则在起作用，不存在代码语法错误：

• 状态重叠的顺序问题：鼠标按压按钮触发:active 的瞬间，必然同时满足:hover 的触发条件。如果两个自定义规则的权重完全相同，CSS会优先应用生成样式表中位置靠后的规则。要是把:active 规则写在:hover 规则的前面，生成的CSS里:hover 就会排在:active 后面，直接把:active 定义的样式盖掉。
• 内置样式的权重冲突：MUI 为按钮预置的:active 状态样式，和你写的单层类名+伪类的权重完全一致，一旦内置样式在最终生成的CSS中位置更靠后，就会直接覆盖你写的自定义active样式。
  之所以hover能正常生效，是因为自定义hover样式生成在MUI内置hover样式的后面，能盖过默认效果，但active的规则因为顺序或者权重问题，没抢过同优先级的其他规则。

可直接复用的调整方法 #

• 先调整伪类规则的书写顺序，把:active 规则放在:hover 规则的后面，保证同权重下:active 的生成顺序靠后，不会被自己写的hover样式覆盖。
• 如果调整顺序后active还是不生效，不需要加!important，只要简单嵌套一层自身类名提高选择器权重即可，示例代码如下：

const useStyles = makeStyles((theme) => ({
  button: {
    "&:hover": {
      boxShadow: "none",
      backgroundColor: "red"
    },
    // 嵌套自身类名提升权重，压过MUI内置的同优先级active样式
    "&$button:active": {
      boxShadow: "none",
      backgroundColor: "black"
    }
  }
}));

• 小细节提醒：如果用的是variant="contained"类型的按钮，尽量直接写backgroundColor属性而不是简写的background，避免MUI内置的半透明 active 遮罩和简写属性产生冲突。

内容的提问来源于stack exchange，提问作者theWanderer