Material-ui: Can we please add props to remove/disable hover effect on <Iconbutton /> like as disableRipple

[Anugraha123]

The hover effect on Iconbutton is really unwelcome in my app. Please add some option to disabling it instead of making it permanent.

cc : @oliviertassinari Thanks in advance

[oliviertassinari]

@Anugraha123 The hover effect was added by @SebastianSchmidt in #10871. I don't think that it needs a specific property for disabling the behavior. However, you can proceeed as follow:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import IconButton from "material-ui/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const styles = theme => ({
  button: {
    "&:hover": {
      backgroundColor: "transparent"
    }
  }
});

function IconButtons(props) {
  const { classes } = props;
  return (
    <IconButton className={classes.button} aria-label="Delete">
      <DeleteIcon />
    </IconButton>
  );
}

IconButtons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(IconButtons);

https://codesandbox.io/s/m393r8rk5y

[cyrfer]

"transparent" did not work for me. I had to take a slightly different approach.

  ButtonUnclickable: {
    '&:hover': {
      backgroundColor: theme.palette.primary.main,
    }
  },