Material UI 中的嵌套按钮：如何在单击子按钮时禁用容器按钮的波纹效果？

Question

我正在尝试将一个按钮嵌套到另一个按钮中（IconButton 在 ListItem 内，button 道具）。问题是即使我单击IconButton，也会触发ListItem 涟漪动画。我希望它仅在我直接单击 ListItem 元素时触发

我试过IconButton的绝对定位，但没有帮助

见example

Answer 1

你可以这样做：

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

或者通过将 Button 包裹在 <ListItemSecondaryAction> 中，这也会禁用波纹效果，但会将图标移动到最终项目，这可以通过一些 css 来修复。

希望这会有所帮助。快乐编码