Изменение цвета значка выбора раскрывающегося списка при наведении курсора на значок в пользовательском интерфейсе матер ⇐ CSS

[Anonymous]

Я работаю над проектом React.js, используя Material UI. Я хочу изменить цвет значка выбора раскрывающегося списка при наведении на него курсора. Однако я хочу, чтобы значок менял цвет только при наведении курсора на значок выбора, а не на весь компонент выбора.
Текущий код:
import ExpandMore from "@mui/icons-material/ExpandMore";



Я пробовал использовать атрибут &:hover, но при наведении на него курсора менялся цвет всего поля выбора.
Я тоже пробовал использование элемента проверки для изменения z-индекса значка.
Наконец, я также попытался передать изменение цвета в качестве реквизита, но это привело к тому, что значок выбора потерял свою функциональность и стал недоступным для кликов. .
//tsx file
IconComponent={(iconProps) => (

)}
//CSS file
.MuiSelect-icon {
color: #121212 !important;
// pointer-events: visiblePainted;
&:hover {
color: #0645c5;
}
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... icon-in-ma