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

Question

我试图将一个按钮嵌套到另一个按钮中（IconButton里面ListItem有button道具）。问题是，ListItem即使我点击IconButton. 我希望它仅在我直接单击ListItem元素时触发

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

看例子

Answer 1

你可以这样做：

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

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

希望这可以帮助。快乐编码