javascript - Material UI 中的嵌套按钮 : how to disable ripple effect of container button while clicking on a child button?

Question

我正在尝试将一个按钮嵌套到另一个按钮中(带有 button 属性的 ListItem 内的 IconButton)。问题是，即使我单击 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>
  );
}

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

希望这有帮助。快乐编码