Javascript 如何在材质界面增加卡片点击的涟漪效应

有没有一种方法，我可以添加涟漪效果的材料ui卡组件点击

---

我还想知道，是否有可能使ripple effect出现在卡组件的内容之上，而不是显示为背景。

官方api似乎不支持它。 但当我想使用

材质ui

涟漪效果时，我就是这么做的：

使用

材质ui/internal/TouchRipple

，查看其

用法示例：

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

{儿童}

---

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

你的组件的高度、宽度和位置在@xiaofan2406中采用的方法对我来说从来都不起作用，更不用说传递高度、宽度和位置似乎很容易被打破，在使用flexbox时可能无法实现

然而，我成功地使其工作如下：

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


{儿童}
我可以看出这个问题没有得到回答，因此我将提供最新的解决方案（将其写成
材质ui
is v.0.18.7（稳定）：

您需要将ripple高阶组件（HOC）导入为：

从“@material ui/core/ButtonBase/TouchRipple”导入TouchRipple；

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

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


我的涟漪

或者，如果需要基于CSS类的apporach，可以使用materialize lib->

在这种情况下，只需将值添加到材质ui
按钮上的
waves
道具上即可，如：

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

编辑MEsave
我注意到TouchRipple已从
内部
目录中移出。
它现在可以在网上买到

下面是我如何使用ButtonBase组件添加涟漪效果的：

基本上，您可以将组件包装在
中，就像这样，
按钮库为您设置
触摸涟漪-

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


....

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

希望这能有所帮助。
以下是2021年更新的解决方案
简单地说，您需要使用material ui中的组件包装自定义组件
然后添加样式填充：0以解决此问题
在这里，我想我的形象应该与连锁反应
您可以通过使用网格和道具容器进行包装进行自定义


从“@material ui/core”导入{Button}”；
功能图像卡（道具）{
返回(
{/*我的自定义组件您可以使用任何组件，即使是材质ui组件也可以*/}
);
}
使用materialize css，您可以将“波浪”效果添加到任何元素（）.我还没有测试过，但我查了一下你的想法。我在过去2个小时左右一直试图让这项工作正常，但没有工作，显然onTouchTap传播没有到达底层TouchRipple组件，我试图手动传递事件，但这似乎也不起作用…有什么建议吗？仅供参考，我已经阅读了source代码，这就是为什么我知道我必须手动将onTouchTap传递到handleOnMouseDown，但它仍然没有work@das_franco
TouchRipple
没有任何
onTouchTap
或
HandleMouseDown
。似乎它不起作用，我添加了
TouchRipple
并在我的组件周围使用它，但ripple创建了页面左上角的es，这显然不是所提到的行为。里面的项目是绝对定位的吗？考虑到material ui在运行时计算了很多属性，所以您应该看看实际的子表示，在任何情况下，它对我都有效，并查看material的源代码l-ui组件这就是它的使用方式我不确定绝对定位的项目，但是，我使用的ripple是这样的：
…
，它不工作。我不知道组件内部的工作方式，这在包装非材料ui组件时起作用，我的建议是：看看子道具的源代码是probably的计算方式与我的第二个建议不同：…未找到模块：无法解析“material ui/internal/TouchRipple”谢谢！只有一件事：现在Ripple位于“@material ui/core/ButtonBase/TouchRipple”中；