React-router-dom 的链接弄乱了 material-ui 的 AppBar 按钮的样式

Question

正如解释在这里，你可以很容易地使用material-ui Button与组合react-router-dom的Link ，像这样：

import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';

<Button component={Link} to="/open-collective">
  Link
</Button>

但是，这样，在您尝试使用color="inherit" （这似乎是AppBar 中Button的默认解决方案）的任何情况下，默认的a:hover样式将覆盖按钮自己的主题设置，因为Link呈现一个锚元素( <a> )，特别是：

1. 在大多数浏览器中，将鼠标悬停在文本上时，文本显示为蓝色。
2. 悬停时不显示点击波纹动画。

我猜AppBar示例总是使用color="inherit" ，这让像我这样的 MUI 初学者很难在这里找到解决方案。 如何在没有inherit情况下使用color和palette并且仍然在AppBar工作？ 设置color="primary"使其具有与AppBar相同的颜色，使其不可见，而color="secondary"导致无法使用的红色调。

如果我不能使用inherit我该怎么做才能恢复漂亮的按钮？

Answer 1

感谢@RyanCogswell，我意识到这很可能不是 MUI 本身的问题。 相反，我发现这是 MUI 和 Bootstrap 之间的斗争（我确定不建议将两者混合使用，但是 Bootstrap 提供了一些 MUI 没有的很酷的东西，反之亦然）。

经过更多的调试，我发现 Bootstrap 覆盖了一些全局标签样式，包括a:hover right here 。

我通过覆盖这些设置来修复它，如下所示：

a[role="button"]:hover {
  text-decoration: none;
  color: inherit;
}