MUI Select - change icon background color when on hover

user_15787409 0
Viewed 1028

I am currently working to customize MUI Select method, However, I found it is difficult to hover the "NarrowDownIcon":

enter image description here

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

material-ui reactjs css javascript
1 Answers

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

Codesandbox Demo

user_94494260
Related