Material UI中的嵌套按钮:如何在单击子按钮时禁用容器按钮的波纹效果? [英] Nesting buttons in Material UI: how to disable ripple effect of container button while clicking on a child button?

问题描述

我正在尝试将一个按钮嵌套到另一个按钮(使用button属性在ListItem内的IconButton中).问题是即使单击IconButton，也会触发ListItem波纹动画.我希望它仅在直接单击ListItem元素

I am trying to nest one button into another (IconButton inside ListItem with button prop). The problem is that the ListItem ripple animation gets triggered even if I click on the IconButton. I want it to trigger only if I click directly on ListItem element

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

I've tried absolute positioning of IconButton, which didn't help

请参见示例

推荐答案

您可以这样做:

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

或将Button包裹在<ListItemSecondaryAction>中，这也将禁用波纹效果，但会将图标移至最终项目，可以使用某些CSS进行固定.

or by wrapping the Button in <ListItemSecondaryAction>which will also disable the ripple effect, but will move the icon to the end item, which can be fixed with some css.

希望这会有所帮助.编码愉快

Hope this helps. Happy coding

这篇关于Material UI中的嵌套按钮:如何在单击子按钮时禁用容器按钮的波纹效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！