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 I

Solution 1:

You can either do it like this:

functionApp() {
  constmouseDown = e => {
    e.stopPropagation ();
  }
  return (
    <ListItembutton>
      Some text
      <IconButtononMouseDown={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