Material UI按钮覆盖需求：点击X按钮仅触发自身事件

要实现点击右侧X按钮仅打印"B"，同时保留指定的视觉样式与涟漪效果，可通过阻止事件冒泡来处理，具体修改如下：

核心修改点 #

给X按钮添加两个事件处理：

1. 在onClick中阻止事件冒泡，避免触发父按钮的点击事件（打印"A"）
2. 在onPointerDown中阻止事件冒泡，避免触发父按钮的涟漪效果

修改后的代码片段 #

<ListButton
  onClick={() => console.log("A")}
  sx={{ position: "relative", width: "100%" }}
>
  <Typography variant="body1">List Item</Typography>
  <Button
    onClick={(e) => {
      e.stopPropagation();
      console.log("B");
    }}
    onPointerDown={(e) => e.stopPropagation()}
    size="small"
    sx={{ position: "absolute", right: 8 }}
  >
    X
  </Button>
</ListButton>

效果说明 #

• 点击X按钮：仅打印"B"，父按钮无涟漪效果
• 点击ListButton的其他区域：打印"A"，涟漪覆盖整个按钮区域（包括X按钮下方）
• 视觉样式完全保留：X按钮右侧对齐，ListButton自动占满抽屉宽度

内容的提问来源于stack exchange，提问作者Dinoswarleafs