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

时间:2019-04-05 23:00:04

标签: javascript reactjs button react-router material-ui

here所述,您可以轻松地将material-ui Buttonreact-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),具体是:

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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

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