below i have different icons from material UI , which currently displays a grey circle whenever i hover on any of them , i want to remove this grey circle and i want each icon to change to a specific color whenever i hover over it i looked at the documentation in material ui but couldn't find anything that explains it , appreciate your feedback.
<Box className={classes.socialmedia}>
<IconButton aria-label="twitter">
<TwitterIcon />
</IconButton>
<IconButton aria-label="facebook">
<FacebookIcon />
</IconButton>
<IconButton aria-label="instagram">
<InstagramIcon />
</IconButton>
<IconButton aria-label="Youtube">
<YouTubeIcon />
</IconButton>
<IconButton aria-label="Apple">
<AppleIcon />
</IconButton>
</Box>
In order to remove the grey circle displaying in background on hover then you can use
disableFocusRipple
&disableRipple
property in IconButton component and setstyle={{ backgroundColor: 'transparent' }}
. Ex:To change the color of icon on hover then use
hover
selector. Ex:I've created a quick example to illustrate the solution in codesandbox:
https://codesandbox.io/s/elegant-ramanujan-wnj9fw?file=/index.js:948-961