将 Material UI 的 TouchRipple 组件应用于自定义元素/组件答案

【问题标题】：Apply Material UI's TouchRipple Component to custom elements/components将 Material UI 的 TouchRipple 组件应用于自定义元素/组件
【发布时间】：2017-01-23 23:39:51
【问题描述】：

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

当单击列表中的一个项目时，我希望获得 Material Design 的涟漪效应。

Material UI 的列表在单击时确实带有涟漪效果，不幸的是因为我使用的是自定义列表（因为我需要有多个列和许多其他自定义）我没有涟漪效果（我'我只是使用 div 来创建我的列表）。

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

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

【问题讨论】：

TouchRipple 今天在内部目录中不可用

标签： javascript reactjs material-design material-ui

【解决方案1】：

我想出了如何让它发挥作用。

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

【讨论】：

【解决方案2】：

您可以通过使用<ButtonBase> 组件包装您的自定义组件来完成此操作。有关示例，请参见 ButtonBase API page 中的“复杂按钮”部分。

【讨论】：