将材质UI的TouchRipple组件应用于自定义元素/组件

Question

我在我的material-ui应用程序中有列表和（图标）按钮。

当点击列表中的项目时，我想从Material Design中产生连锁影响。

不幸的是，由于我使用的是自定义列表（因为我需要有多列和许多其他自定义），所以材质UI的列表确实带有点击时的涟漪效应，因此我不具备连锁效果我只是使用div来创建我的列表）。

我知道Material UI有一个组件TouchRipple，用于所有具有涟漪效应的组件（可以在internal目录中找到它）我试图将自定义列表项包装到TouchRipple组件中，但不幸的是，动画显示在页面的顶部，与实际列表项目的位置和大小没有任何关系，基本上它不会像它应该那样工作。

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

Answer 1

我想出了如何使它工作。

只需将样式transform: translate(0px, 0px);添加到由TouchRipple生成的父div中，就可以使波纹处于正确的位置和大小。