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:

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