Cant change the Icon hover effect

[jerviechronix]

I cant override the hover effect of the Icon.

[SnekCode]

Hello!

Start with a style hook like so

const useStyles = makeStyles((theme) => ({
  searchIconButton: {
    backgroundColor: "#EFD26E",
    position: "relative",
    "&:hover": {
      backgroundColor: "green",
    },
  },
}));

grab the classes object that is returned from that hook const classes = useStyles();

then in your component use the classes

const Component = () => {
const classes = useStyles();

     return ( 
       <SearchBar
           classes={{
            searchIconButton: classes.searchIconButton, 
            }}
      />
)
}

This stack overflow helped a lot for this answer!
https://stackoverflow.com/a/67920344