[英]MUI 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":我目前正在努力自定义 MUI Select
方法,但是,我发现很难将“NarrowDownIcon”悬停:
I want to change the backgroundColor
of this icon to "blue" when hover it, this is my code:我想在悬停时将此图标的backgroundColor
颜色更改为“蓝色”,这是我的代码:
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:然后我应用这个 css 来选择图标类:
<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但它不起作用,谁能帮我解决这个问题,谢谢
To change the icon color when you hover anywhere inside Select:将鼠标悬停在 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
:请注意,您的代码不起作用,因为图标的pointerEvents
设置为none
:
icon: {
pointerEvents: "auto",
"&:hover": {
color: "red"
}
}
<Select classes={{ icon: classes.icon }}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.