score:1

Accepted answer

In order to remove the grey circle displaying in background on hover then you can use disableFocusRipple & disableRipple property in IconButton component and set style={{ backgroundColor: 'transparent' }}. Ex:

<IconButton
    disableFocusRipple
    disableRipple
    style={{ backgroundColor: "transparent" }}
    aria-label="twitter"
  >
    <TwitterIcon className={classes.twitter} />
  </IconButton>

To change the color of icon on hover then use hover selector. Ex:

    const useStyles = makeStyles({
  twitter: {
    "&:hover": {
      color: "#00acee"
    }
  }
});

I've created a quick example to illustrate the solution in codesandbox:

https://codesandbox.io/s/elegant-ramanujan-wnj9fw?file=/index.js:948-961

score:0

Define a hook. Import makeStyle from '@material-ui/core/styles'.

const useStyles = makeStyle(() => ({
  styleRed: {
    '&:hover': {
      backgroundColor: '#f00'
    }
  },
  styleBlue: {
    '&:hover': {
      backgroundColor: '#00f'
    }
  }
}));

Then in your component:

// using our hook
const {styleRed, styleBlue} = useStyles();

// some more code

return (
  <>
    <IconButton aria-label="twitter" classes={styleRed}>
      <TwitterIcon />
    </IconButton>
    <IconButton aria-label="facebook" classes={styleBlue}>
      <FacebookIcon />
    </IconButton>
  </>
)

Related Query

More Query from same tag