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

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在这里。

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

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