【问题标题】：How to add ripple effect when clicking Card in MUI如何在 MUI 中单击卡片时添加波纹效果
【发布时间】：2016-06-05 12:32:26
【问题描述】：

有没有办法可以在单击时为 MUI Card 组件添加波纹效果。

我也想知道，是否可以在 Card 组件的内容之上制作涟漪效果，而不是显示为背景。

【问题讨论】：

使用 materialize-css，您可以将“波浪”效果添加到看似任何元素 (materializecss.com/waves.html#!)。我还没有测试过，但是看看你的胡同。

标签： javascript reactjs material-design material-ui

【解决方案1】：

官方api好像不支持。但这就是我要做的，当我想使用material-ui涟漪影响时：

使用material-ui/internal/TouchRipple，看看它的source code

使用示例：

<YourComponent>
    <TouchRipple style={style}/>
    {children}
</YourComponent>

你需要传递内联样式来指定它的高度、宽度和位置匹配YourComponent的高度、宽度和位置

【讨论】：

我在过去 2 个小时左右一直在尝试使这项工作，但没有成功，显然 onTouchTap 传播没有到达底层的 TouchRipple 组件，我试图手动传递事件，但这似乎也不起作用……有什么建议吗？
仅供参考，我已经阅读了源代码，这就是我知道我必须手动传递 onTouchTap 才能处理 OnMouseDown，但它仍然不起作用
@das_franco TouchRipple 没有任何onTouchTap 或handleOnMouseDown。 See here

【解决方案2】：

@xiaofan2406 中采用的方法对我来说从来没有用过，更不用说传递高度、宽度和位置似乎很容易被破坏，并且在使用 flexbox 时可能无法实现。

但是我设法让它像这样工作：

<YourComponent>
    <TouchRipple>
        {children}
    </TouchRipple>
</YourComponent>

【讨论】：

似乎它不起作用，我添加了TouchRipple 并在我的组件周围使用它，但是在页面的左上角创建了波纹，这显然不是提到的行为。
里面的物品是绝对定位的吗？考虑到material-ui在运行时计算了很多属性，所以你应该看看实际的孩子表示，无论如何，它对我有用，看看material-ui组件的源代码这是它是如何使用的
我不确定绝对定位的项目，但是，我正在使用这样的涟漪：<TouchRipple><Card>...</Card></TouchRipple>，但它不起作用。
我不知道组件的内部工作原理，这在包装非实体 ui 组件时有效，我的建议是：看看的源代码，children prop 是可能没有按照您期望的方式计算我的第二个建议：...

【解决方案3】：

我可以看到这个问题没有得到回答，所以我将提供一个最新的解决方案（写成 material-ui 是 v. 0.18.7（稳定）：

您需要导入波纹高阶补偿。 (HOC) 为：

import TouchRipple from '@material-ui/core/ButtonBase/TouchRipple';

然后您可以使用TouchRipple 包装您选择的任何组件，例如：

<TouchRipple>
   <div>
     MY RIPPLING DIV
   </div>
</TouchRipple>

或者，如果你需要一个基于 CSS 类的方法，你可以使用 materialize lib -> https://react-materialize.github.io/#/

在这种情况下，只需将值添加到 material-ui Button 上的 waves 属性即可，例如：

<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>

【讨论】：

找不到模块：无法解析“material-ui/internal/TouchRipple”
谢谢！只有一件事：现在 Ripple 位于 '@material-ui/core/ButtonBase/TouchRipple';

【解决方案4】：

我注意到 TouchRipple 已从 internal 目录中移出。现在可以通过ButtonBase folder 获得。

这是我如何使用 ButtonBase 组件添加波纹效果 -

基本上，你包装你的组件，比如<Card> 在<ButtonBase> 中，ButtonBase 负责为你设置TouchRipple -

<ButtonBase>
     <Card>
         ....
     </Card>
</ButtonBase>

这是一个 Codesandbox 链接到工作演示。我知道这不是最好的方法。你可以直接使用TouchRipple/Ripple组件，但是我发现这种方式非常好用。

希望这会有所帮助。

【讨论】：

【解决方案5】：

这是 2021 年更新的解决方案

simple 您需要使用材料 ui 中的组件包装您的自定义组件。
然后添加 style padding: 0 即可解决。
在这里，我希望我的图像应该产生涟漪效应。

您可以通过使用 Grid 和 props 容器进行包装来自定义


import { Button } from "@material-ui/core";

function ImageCard(props){

return (
            <Button style={{ padding: 0, borderRadius: "16px" }}>
              {/*my custom component you can use any component even material ui component also*/}
                <img
                  src={yourImageUrl}
                  alt="img"
                  style={{
                    height: 200,
                    width: 400,
                    borderRadius: "16px",//optional
                  }}
                />
              </Button>
      );
}

【讨论】：

【解决方案6】：

2021 年更新

单击Card 时添加涟漪效果的最惯用方法是使用CardActionArea。 This component 继承了 ButtonBase 的 props。它还会在悬停和聚焦时更改 Card 背景颜色（与 ButtonBase 不同）：

<Card>
  <CardActionArea>
    <CardContent>
      {...}
    </CardContent>
  </CardActionArea>
</Card>

【讨论】：