I am currently working on a project using React.js and Material UI. My goal is to modify the color of the dropdown select icon when it is hovered over. However, I specifically want the color change to apply only to the icon itself and not the entire select component.
Here is the code snippet that is currently in use:
import ExpandMore from "@mui/icons-material/ExpandMore";
<Select
className="selectField"
variant="standard"
fullWidth
IconComponent={ExpandMore}
/>
I have attempted to utilize the &:hover attribute but found that it alters the color of the entire select box rather than just the icon.
Another strategy I tried was adjusting the z-index of the icon using inspect element, but this did not produce the desired result either.
Lastly, I experimented with passing the color change as a prop. Unfortunately, this approach caused the select icon to lose its functionality and become unclickable.
//tsx file
IconComponent={(iconProps) => (
<ExpandMore {...iconProps} className="MuiSelect-icon" />
)}
//CSS file
.MuiSelect-icon {
color: #121212 !important;
// pointer-events: visiblePainted;
&:hover {
color: #0645c5;
}
}