Material UI下拉选择器图标单独hover变色问题求助

解决方案 #

通过调整图标容器和图标的指针事件属性，确保只有图标本身响应悬停状态，同时保留图标的点击功能：

1. 修改Select组件的IconComponent #

import ExpandMore from "@mui/icons-material/ExpandMore";

<Select
  className="selectField"
  variant="standard"
  fullWidth
  IconComponent={(iconProps) => (
    <ExpandMore {...iconProps} className="custom-select-icon" />
  )}
/>

2. 添加CSS样式 #

/* 阻止图标容器捕获悬停事件，避免整个选择框悬停时触发图标变色 */
.selectField .MuiSelect-iconWrapper {
  pointer-events: none;
}

/* 设置图标的默认颜色，并允许其接收指针事件 */
.custom-select-icon {
  color: #121212;
  pointer-events: auto;
}

/* 仅当鼠标悬停在图标上时改变颜色 */
.custom-select-icon:hover {
  color: #0645c5;
}

原理说明 #

• pointer-events: none 应用于图标容器，使得容器不会响应任何鼠标事件，从而避免整个选择框悬停时触发图标的hover状态。
• pointer-events: auto 应用于图标本身，确保图标可以正常接收悬停和点击事件，保留其打开下拉菜单的功能。
• 自定义图标类 custom-select-icon 避免与Material UI内置类名冲突，确保样式优先级正确。

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