Nesting buttons in Material UI: how to disable ripple effect of container button while clicking on a child button?

问题

I am trying to nest one button into another (IconButton inside ListItem with button prop). The problem is that the ListItem ripple animation gets triggered even if I click on the IconButton. I want it to trigger only if I click directly on ListItem element

I've tried absolute positioning of IconButton, which didn't help

See the example

回答1:

You can either do it like this:

function App() {
  const mouseDown = e => {
    e.stopPropagation ();
  }
  return (
    <ListItem button>
      Some text
      <IconButton onMouseDown={mouseDown}>
        <Favorite />
      </IconButton>
    </ListItem>
  );
}

or by wrapping the Button in <ListItemSecondaryAction>which will also disable the ripple effect, but will move the icon to the end item, which can be fixed with some css.

Hope this helps. Happy coding

来源：https://stackoverflow.com/questions/57374263/nesting-buttons-in-material-ui-how-to-disable-ripple-effect-of-container-button