将 Material UI 的 TouchRipple 组件应用于自定义 elements/components
Apply Material UI's TouchRipple Component to custom elements/components
我的 material-ui 应用程序中有一个列表，其中包含列和（图标）按钮。
当单击列表中的项目时，我希望从 Material 设计中获得涟漪效应。
Material UI 的列表在单击时确实会产生连锁反应，不幸的是因为我使用的是自定义列表（因为我需要有多个列和许多其他自定义项) 我没有涟漪效应（我只是使用 div 来创建我的列表）。
我知道MaterialUI有一个组件TouchRipple，所有有波纹效果的组件都会用到它（在internal目录下可以找到）我'我试图将我的自定义列表项包装到 TouchRipple 组件中，但不幸的是，动画显示在页面顶部，与实际列表项的位置和大小没有任何关系，基本上它不能正常工作。
我的问题是，我可以吗？如果可以，我该如何在我的自定义组件上使用 TouchRipple 组件来为它们添加涟漪效果？
我想出了如何让它发挥作用。
只需将样式 transform: translate(0px, 0px); 添加到由 TouchRipple 生成的父级 div 即可使波纹的位置和大小正确。
您可以通过使用 <ButtonBase> 组件包装您的自定义组件来实现此目的。有关示例，请参阅 ButtonBase API page 中的 "complex buttons" 部分。
我的 material-ui 应用程序中有一个列表，其中包含列和（图标）按钮。
当单击列表中的项目时，我希望从 Material 设计中获得涟漪效应。
Material UI 的列表在单击时确实会产生连锁反应，不幸的是因为我使用的是自定义列表（因为我需要有多个列和许多其他自定义项) 我没有涟漪效应（我只是使用 div 来创建我的列表）。
我知道MaterialUI有一个组件TouchRipple，所有有波纹效果的组件都会用到它（在internal目录下可以找到）我'我试图将我的自定义列表项包装到 TouchRipple 组件中，但不幸的是，动画显示在页面顶部，与实际列表项的位置和大小没有任何关系，基本上它不能正常工作。
我的问题是，我可以吗？如果可以，我该如何在我的自定义组件上使用 TouchRipple 组件来为它们添加涟漪效果？
我想出了如何让它发挥作用。
只需将样式 transform: translate(0px, 0px); 添加到由 TouchRipple 生成的父级 div 即可使波纹的位置和大小正确。
您可以通过使用 <ButtonBase> 组件包装您的自定义组件来实现此目的。有关示例，请参阅 ButtonBase API page 中的 "complex buttons" 部分。