如解释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>
),特别是:
- 在大多数浏览器中,将鼠标悬停在文本上方时文本显示为蓝色。
- 悬停时不显示点击波纹动画。
我猜 AppBar
示例总是使用 color="inherit"
,让像我这样的 MUI 初学者很难在这里找到解决方案。如何使用 color
和 palette
没有 inherit
并仍在 AppBar
工作?设置color="primary"
使它具有与 AppBar
相同的颜色, 使其不可见,同时 color="secondary"
导致无法使用的红色调。
如果我无法使用 inherit
,我该怎么做才能恢复漂亮的按钮? ?
最佳答案
感谢@RyanCogswell,我意识到这很可能不是 MUI 本身的问题。相反,我发现这是 MUI 和 Bootstrap 之间的斗争(我确信不建议将两者混合使用,但是 Bootstrap 提供了一些 MUI 没有的很酷的东西,反之亦然)。
经过一些调试,我发现Bootstrap覆盖了一些全局标签样式,包括a:hover
right here .
我通过像这样覆盖这些设置来修复它:
a[role="button"]:hover {
text-decoration: none;
color: inherit;
}
关于javascript - React-router-dom Link 弄乱了 material-ui AppBar Button 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55544317/