将鼠标悬停在 Material UI 中的图标上时更改下拉选择图标的颜色

Question

我正在使用 Material UI 开发一个 React.js 项目。当我将鼠标悬停在下拉选择图标上时，我想更改它的颜色。但是，我只希望当我将鼠标悬停在选择图标上时图标才改变颜色，而不是整个选择组件。

当前代码是

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

<Select
              className="selectField"
              variant="standard"
              fullWidth
              IconComponent={ExpandMore}
/>

我尝试使用 &:hover 属性，但是当我将鼠标悬停在整个选择框上时，它会更改整个选择框的颜色。

我还尝试使用检查元素来更改图标的 z-index。

最后，我还尝试将颜色更改作为道具传递，但这导致选择图标失去其功能并变得不可点击。

//tsx file
IconComponent={(iconProps) => (
                <ExpandMore {...iconProps} className="MuiSelect-icon" />
              )}
//CSS file
  .MuiSelect-icon {
    color: #121212 !important;
    // pointer-events: visiblePainted;
    &:hover {
      color: #0645c5;
    }
  }

Answer 1

要仅使用 CSS 更改悬停时下拉选择图标的颜色，您可以使用 ::after 或 ::before 伪元素来设置下拉图标的样式。

.selectField-box {
    position: relative;
    display: inline-block;
}

.selectField {
    appearance: none; /* Remove default arrow */
    background: none;
    padding: 10px 40px 10px 10px; /* Make space for the icon */
    border: 1px solid #ccc;
    cursor: pointer;
}

.selectField-box::after {
    content: '▼'; /* Custom dropdown arrow */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #000; /* Default arrow color */
}

.selectField-box:hover::after {
    color: #007bff; /* Change arrow color on hover */
}

此结构中的内部下拉菜单

<div class="selectField-box">
<!-- code here -->
</div>