After clicking on the IconButton, the background color changes to an oval shape. I now need to modify the background color when it is clicked.
CSS
The CSS code for the IconButton changes the background color upon hover. I require a similar effect for the onClick event.
const customStyles = makeStyles(theme => ({
paper: {
backgroundColor: theme.palette.accent[100],
},
iconButton: {
padding: "10px",
margin: "0 5px 1px 0",
"&:hover, &.Mui-focusVisible, &:active": {
backgroundColor: theme.palette.accent[100],
},
"&$buttonDisabled": {
color: theme.palette.accent[100],
},
},
})
Material UI
<Paper className={classes.paper}>
<Box display={"flex"} height={theme.spacing(2.3)}>
<IconButton
color={"inherit"}
size={"small"}
className={classes.iconButton}
onClick={() => {
history.push("/a")
}}>
<img src={"/static/images//a.svg"} />
<Box pl={1} mt={"-4px"} maxWidth={theme.spacing(10)}>
<Typography variant={"subtitle1"} component="p">
{" Hello"}
</Typography>
</Box>
</IconButton>
</Box>
</Paper>