0
292
ViewsMUI Select - change icon background color when on hover
I am currently working to customize MUI Select method, However, I found it is difficult to hover the "NarrowDownIcon":
I want to change the backgroundColor of this icon to "blue" when hover it, this is my code:
icon: {
color: theme.palette.primary.dark,
height: 32,
width: 32,
top: `calc(50% - ${theme.spacing(2.2)}px)`,
borderRadius: "50%",
cursor: "pointer",
"&:hover": {
backgroundColor: theme.palette.primary.lighter,
},
},
then i applied this css to select icon class:
<Select
value={selectedValue}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
className={classes.textInput}
inputProps={{
id,
name: id,
}}
classes={{
icon: classes.icon,
}}
but it doesn't work , can anyone help me with this, Thank you
·
Juan Pablo Isaza
1 answers
Answer question0
To change the icon color when you hover anywhere inside Select:
root: {
"&:hover .MuiSvgIcon-root": {
color: "red"
}
},
<Select className={classes.root}>
To change the icon color when you only hover on the icon itself (not the input field). Note that your code doesn't work because the icon has pointerEvents set to none:
icon: {
pointerEvents: "auto",
"&:hover": {
color: "red"
}
}
<Select classes={{ icon: classes.icon }}>
·
Juan Pablo Isaza
Report
Answer question