javascript - React-router-dom Link 弄乱了 material-ui AppBar Button 的样式

Question

如解释here , 你可以很容易地使用 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" 的任何情况下(这似乎是 Button 中 AppBar 的默认解决方案)默认 a:hover样式将覆盖按钮自己的主题设置，因为 Link呈现一个 anchor 元素 ( <a> )，特别是:

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

我猜 AppBar示例总是使用 color="inherit" ，让像我这样的 MUI 初学者很难在这里找到解决方案。如何使用 color和 palette没有 inherit并仍在 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;
}