javascript - MUI Select - 悬停时更改图标背景颜色

Question

我目前正在自定义 MUI Select 方法，但是，我发现很难将鼠标悬停在“NarrowDownIcon”上:

我想在鼠标悬停时将此图标的 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,
  },
},

然后我应用这个 CSS 来选择图标类:

  <Select
      value={selectedValue}
      onChange={onChange}
      onFocus={onFocus}
      onBlur={onBlur}
      className={classes.textInput}
      inputProps={{
        id,
        name: id,
      }}
      classes={{
        icon: classes.icon,
      }}

但是没有用，谁能帮我解决一下，谢谢

Answer 1

将鼠标悬停在“选择”内的任意位置时更改图标颜色:

root: {
  "&:hover .MuiSvgIcon-root": {
    color: "red"
  }
},

<Select className={classes.root}>

仅将鼠标悬停在图标本身(而非输入字段)上时更改图标颜色。请注意，您的代码不起作用，因为该图标的 pointerEvents 设置为 none:

icon: {
  pointerEvents: "auto",
  "&:hover": {
    color: "red"
  }
}

<Select classes={{ icon: classes.icon }}>