自定义链接悬停下划线高亮材料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

- jen007

Answer 1

如果你不是通过 CSS 而是类来实现它，你可以这样做：

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

- foreverAnIntern

Answer 2

考虑到是标签，我认为您需要覆盖的是text-decoration-color，而不是border-bottom。此外，为了使样式更加具体，您可以给一个className，并定义该类的样式。

组件:

  <Breadcrumbs aria-label="breadcrumb" separator=" " className="menu">
    <Link className="custom-link" to="/">
      Home
    </Link>
  </Breadcrumbs>

风格：

.custom-link:hover {
  color: red;
  text-decoration-color: red;
}

请看实际示例： https://codesandbox.io/s/cool-bush-wpn4m

- Chris Ngo

---

@jen007 嗯，这太奇怪了。我创建了一个沙箱，它在我的机器上可以工作，但是你的可能不同。你想分享一下吗？ - Chris Ngo

哦，那个可以，我只需要删除 color:red，因为它也会改变文本的颜色。谢谢！ - jen007

哦，不客气！我想它们最好匹配起来哈哈。如果您觉得这很有帮助，请考虑将其标记为解决方案。我认为创建一个类比直接针对所有a标签更好的做法。如果您针对所有a标签进行操作，并发现可能希望其他标签具有不同的颜色，那么这只会增加更新的工作量。@jen007 - Chris Ngo

Answer 3

按照这里的文档，为Material UI提供自定义主题。

与链接悬停下划线相关的部分如下：

import { createTheme } from "@mui/material";

export const myTheme = createTheme({
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          textDecoration: "none",
          ":hover": {
            textDecoration: "underline",
          },
        },
      },
    },
  },
});

- V Maharajh

Answer 4

正如其他答案所建议的那样，代码肯定会是这样的

a {  
  text-decoration-color: red;  
}

有两种方法可以使其工作：

• 在 index.css 中声明锚点标签样式，并将其应用于整个 Web 应用程序，就像您所做的那样。
• 或者，您可以在使用 withStyles HOC 时传递的样式对象中声明它。如果有帮助的话，您可以将 Link 标签包装在一个 div 中，并在该 div 上应用样式。这将保持更改的局部性，并且 Link 标签将从其父 div 继承属性。

- Pipe Runner

Answer 5

关于那些回答全局更改的问题（似乎不是被问到的问题，但这就是我来到这里的原因），MUI 的方法是在您的主题中覆盖 MuiLink 的默认属性。例如：

export const muiTheme = responsiveFontSizes(
  createTheme({
    components: {
      MuiLink: {
        defaultProps: {
          underline: "hover",
        },
        styleOverrides: {
          underlineHover: {
            "&:hover": {
              textDecorationColor: "red",
            },
          },
        },
      },
    },
  })
);

- Trevor Robinson