Javascript React路由器dom'；s链接会弄乱材质ui的样式'；s应用程序栏按钮

如上所述，您可以轻松地将

材质ui

按钮

与

反应路由器dom

的

链接结合使用，如下所示：

从'react router dom'导入{Link}
从“@material ui/core/Button”导入按钮；
链接

但是，通过这种方式，在尝试使用
color=“inherit”
（这似乎是中
按钮的默认解决方案）的任何场景中，默认的
a:hover
样式将覆盖按钮自己的主题设置，因为
Link
呈现锚元素（
），具体来说：

在大多数浏览器中，文本悬停在其上方时显示为蓝色
悬停时不显示“单击涟漪”动画
我猜
AppBar
示例总是使用
color=“inherit”
，这使得像我这样的MUI初学者很难在这里找到解决方案。如何使用
颜色
和
调色板
，而不使用
继承
，并且仍然在
AppBar
中工作？设置
color=“primary”
使其具有与
AppBar
相同的颜色，使其不可见，而
color=“secondary”
则会导致无法使用的红色色调

如果我不能使用
inherit
，我该怎么做才能找回漂亮的按钮？
多亏了@RyanCogswell，我意识到这很可能不是MUI本身的问题。相反，我发现这是MUI和Bootstrap之间的斗争（我确信不建议将两者混用，但是Bootstrap提供了一些MUI没有的很酷的东西，反之亦然）

在进一步调试之后，我发现引导覆盖了一些全局标记样式，包括
a:hover

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

a[role=“button”]：悬停{
文字装饰：无；
颜色：继承；
}
我经常以这种方式使用按钮，没有您提到的任何样式问题。在中，我看不到常规按钮和使用
链接的按钮在样式上有任何视觉差异。如果您看到不同的内容，请说明您使用的浏览器。如果您有不同的代码来显示您描述的行为，请共享一个沙盒来复制它。@RyanCogswell谢谢您的全面回复！我发现了我的问题：我使用了
color=“inherit”
！将其设置为预先配置的颜色名称可以修复它：）@RyanCogswell我相应地更新了我的问题。问题是
AppBar
示例总是使用
color=“inherit”
，因此，我还没有找到一种方法来使用
AppBar
中的
component=“Link”
获得正确的按钮。非常感谢任何有效的基本解决方案！：）使用
链接
，我仍然看不到您提到的任何样式问题。请共享一个沙盒，复制您看到的内容。感谢@RyanCogswell提供的所有帮助！多亏了你，我终于找到了罪犯，并发布了答案！：DGlad您找到了罪魁祸首，但如果您在应用程序栏外使用链接按钮，并且希望使用的颜色不是
inherit
，则此解决方案可能会给您带来额外的麻烦。“重要”是否必要？拥有“[role='button']”应该已经使此规则比引导规则更具体，因此我希望它在没有“！important”的情况下获胜。@RyanCogswell你是对的<代码>！重要信息
不是必需的！再次感谢你！：）