MUI选择器 - 鼠标悬浮时更改图标背景颜色

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,
      }}

但是它不起作用，有人能帮我吗？谢谢。

- vincent

Answer 1

当您在 Select 内部任何位置悬停时，可以更改图标颜色。

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

<Select className={classes.root}>

当你仅在图标本身（而非输入框）上悬停时更改图标颜色。请注意，您的代码不起作用是因为该图标设置了pointerEvents为none：

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

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

- NearHuscarl

---

@vincent 你可能想再问一个问题。 - NearHuscarl

是的，我重新编辑了我的问题，您能再次帮助我吗？谢谢。 - vincent

@vincent，请为您的独立问题创建一个新帖子。 - NearHuscarl

@NearHuscarl，你能帮我解决这个问题吗？谢谢。 - vincent