Question

如here所述，您可以轻松地将material-ui Button与react-router-dom的{{1}}结合使用，如下所示：

Link

但是，通过这种方式，在任何尝试使用import { Link } from 'react-router-dom' import Button from '@material-ui/core/Button'; <Button component={Link} to="/open-collective"> Link </Button>（在AppBar中似乎是color="inherit"的默认解决方案）的情况下，默认Button样式将覆盖按钮自己的主题设置，因为a:hover呈现锚元素（Link），具体是：

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

我想<a>示例始终使用AppBar，这对像我这样的MUI初学者来说很难在这里找到解决方案。如何在不使用color="inherit"的情况下使用color和palette并仍在inherit中工作？设置AppBar使其颜色与color="primary"相同，使其不可见，而AppBar导致不可用的红色。

如果我不能使用color="secondary"，该怎么做才能恢复漂亮的按钮？

Answer 1

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

经过更多调试后，我发现Bootstrap会覆盖某些全局标记样式，包括a:hover right here。

我通过覆盖如下设置修复了它：

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

React-router-dom的Link弄乱了Material-ui的AppBar按钮的样式

1 个答案: