Currently I'm trying to overlay a button on another button in Material UI:

https://codesandbox.io/s/responsivedrawer-demo-material-ui-forked-inc7xz?file=/demo.js

I'd like if pressing the X would only print B, rather than printing A and B. I know nesting buttons is not the correct way to do it, but I'd like to overlay the button with the exact look and ripple behavior I'm currently seeing with the nesting. I like how it looks so well aligned on the right, clicking the X doesn't ripple the effect to the entire ListButton the ListButtons takes up the entire drawer width without any extra work, and clicking the ListButton ripples under the X.

I'd really appreciate it if someone has the time to help. Thanks so much!

CodePudding user response：

The solution would be to stopPropagation inside the onClick function since this is where the click event happens.

onClick={(e) => {
  e.stopPropagation();
  console.log("B");
}}