Javascript 应用材料界面'；将Ripple组件触摸到自定义元素/组件

我的材质ui应用程序中有一个列表，其中包含列和（图标）按钮

单击列表中的某个项目时，我希望材料设计产生涟漪效果

材质UI的列表在单击时确实会产生连锁反应，不幸的是，因为我使用的是自定义列表（因为我需要有多个列和许多其他自定义设置），我没有连锁反应（我只是使用div创建列表）

我知道Material UI有一个组件TouchRipple，在所有具有涟漪效应的组件中都会用到它（你可以在

internal

目录中找到它）。我尝试将自定义列表项包装到TouchRipple组件中，但不幸的是，动画显示在页面顶部，与实际列表项的位置和大小没有任何关系，基本上它不能正常工作

---

我的问题是，我可以吗？如果可以，我该如何在自定义组件上使用TouchRipple组件来为它们添加涟漪效果？

我找到了如何使其工作的方法

---

只需添加样式

transform:translate（0px，0px）

到TouchRipple生成的父div，使ripple处于正确的位置和大小。

您可以通过使用

组件包装自定义组件来实现这一点。有关示例，请参阅中的“复杂按钮”部分。

TouchRipple目前在内部目录中不可用