MUI Select组件NarrowDownIcon hover时背景色修改不生效如何解决

问题核心原因 #

这是MUI Select组件的默认特性导致的：内置的icon节点默认被设置了pointer-events: none，无法接收鼠标事件，所以你写的:hover选择器根本不会被触发。另外也有可能是自定义样式优先级低于MUI内置样式，导致规则被覆盖。

解决方案 #

按下面的步骤修改你的样式代码即可：

1. 给icon样式添加pointerEvents: 'auto'，放开鼠标事件限制
2. 可以给hover选择器多加一个&提升CSS优先级，避免被内置样式覆盖

修改后的样式代码如下：

icon: {
  color:        theme.palette.primary.dark,
  height:       32,
  width:        32,
  top:          `calc(50% - ${theme.spacing(2.2)}px)`,
  borderRadius: "50%",
  cursor:       "pointer",
  // 新增：放开鼠标事件限制
  pointerEvents: "auto",

  // 多加一个&提升优先级
  "&&:hover": {
    backgroundColor: theme.palette.primary.lighter,
  },
},

补充验证方法 #

如果修改后还是不生效，可以打开浏览器控制台检查对应icon元素：

• 若hover时自定义的背景色规则存在但被划掉，说明优先级仍不足，可以再多加&或者给选择器加更多前缀
• 若hover时规则根本没出现，检查pointer-events属性是否确实生效为auto

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