React-Router NavLink 更改 Material-UI ListItem 上的波纹颜色答案

【问题标题】：React-Router NavLink changes ripple colors on Material-UI ListItemReact-Router NavLink 更改 Material-UI ListItem 上的波纹颜色
【发布时间】：2018-12-14 22:39:42
【问题描述】：

我正在尝试将 Material-UI <ListItem button> 包装到 react-router <NavLink> 中。基本上它工作正常，但我注意到<NavLink> 组件改变了<ListItem button> 上的波纹颜色。如果我反过来包装它（ListItem 中的 NavLink），我将无法使用 classes.linkActive 设置 <ListItem> 的样式，所以这不是一个选项。

这是一个显示问题的最小代码示例：https://codesandbox.io/s/xrxl90jv04

我已经浏览了一些组件，但我有点新反应，所以关于如何防止 NavLink 更改颜色或以任何方式告诉 ListItem 再次使用默认/主题调色板的任何想法？

【问题讨论】：

你认为你可以把你的代码放在CodeSandbox 或类似的地方吗？我不太确定我是否理解您的问题。
很抱歉我不能，因为这是给我的雇主的...
当然，不是全部，而是Minimal, Complete, and Verifiable example。
就像：普通的 ListItem 组件有灰色波纹。如果我将它包装到 NavLink 组件中，波纹会变为红色（此外，它会在 mouseUp 上变为蓝色背景）
好的。我不确定您是如何编写 CSS 的，但您可以在其中添加 this CSS。

标签： javascript reactjs react-router material-ui

【解决方案1】：

哇，大多数时候，我自己回答我的问题。感谢 Tholle 告诉我创建一个最小的工作示例，我注意到 <NavLink> 内部的波纹颜色取决于文本颜色（基本上它只是 text-decoraion 下划线的颜色）。所以我只是在<NavLink> 中添加了一个样式color: 'inherit'，这就像一个魅力:)

更新的代码在示例中：https://codesandbox.io/s/xrxl90jv04

【讨论】：

谢谢，你为我节省了很多时间！！ :)