自定义链接悬停下划线高亮材质-ui

Question

我正在尝试遵循material-ui 自定义样式和链接，但不确定如何覆盖classes和使用withStyles

      <Breadcrumbs aria-label="breadcrumb" separator=" " className="menu">
        <Link color="inherit" href="/home">
          Home
        </Link>
      </Breadcrumbs>

我修改了全局app.css文件

a:hover{
  border-bottom: 1px solid red
}

结果就像

Home
----
----  <- I have 2 underlines now when hovering over the link. The bottom one will be red.

我如何覆盖它，例如以下？

Home
---- <- only 1 red underline shown when hovering over the link

Answer 1

对于那些不是通过 CSS 而是通过类来做的人，你可以这样做

link: {
    color: "#00ff00",
    "&:hover": {
        color: "#000000",
        textDecoration: "underline #000000"
    }
},