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

Question

I'm trying to follow material-ui custom styles and link but am not sure how to override classes and use withStyles

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

I've modified global app.css file

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

And the outcome is like

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

How do I override this such as following?

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

Answer 1

For those not doing it through CSS but rather classes, you could do

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

Answer 2

Considering that a Link is an <a> tag, I think what you need to override is text-decoration-color, not border-bottom. Additionally, to make your styling a bit more specific, you can give the Link a className and define styles for that class.

Component:

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

Style:

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

See working example: https://codesandbox.io/s/cool-bush-wpn4m

Answer 3

As suggested by the other answer the code would surely be

 a { text-decoration-color: red; }

There are two ways you can get this to work:

• Declare the anchor tag styling in index.css and applying it over the whole web-app like you have done.
• Or you could declare it in the style object that you pass while using withStyles HOC. If it helps, you can wrap the Link tag in a div and apply the styles on that div. This will keep the change local, and the Link tag will inherit the property from its parent div.

Answer 4

Provide Material UI with a custom theme, as documented here .

The relevant bits for link hover underlining are:

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

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

Answer 5

Regarding the answers that address changing this globally (which doesn't seem to be what was asked, but was how I ended up here), the MUI Way is to override the default props for MuiLink in your theme. For example:

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