Customize link hover underline highlight 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

score 10 · Answer 1 · answered Jul 23 '20 at 16:42

10

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

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

answered Jul 23 '20 at 16:42

foreverAnIntern

414
6
15

Chris Ngo · Accepted Answer · 2019-08-12T03:22:14.870

3

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

edited Aug 12 '19 at 03:22

answered Aug 12 '19 at 03:06

Chris Ngo

15,460
3
23
46

1

@jen007 hmm thats so strange. I've made a sandbox where its working, but your might look different. Do you want to share it? – Chris Ngo Aug 12 '19 at 03:27
Oh that works, I just have to remove `color:red` since it also changes the color of the text. Thanks!! – jen007 Aug 12 '19 at 03:27
Oh you're welcome! I figured they might as well match ahha. Please consider marking this as the solution if you found this helpful. I think making a class is better practice instead of targeting all a tags directly. If you target all a tags, and find that you might want others to be a different color, that just creates more work to update. @jen007 – Chris Ngo Aug 12 '19 at 03:29

score 2 · Answer 3 · answered Jul 12 '22 at 03:33

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",
          },
        },
      },
    },
  },
});

score 1 · Answer 4 · answered Aug 12 '19 at 03:19

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.

score 0 · Answer 5 · answered Dec 17 '22 at 00:12

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",
            },
          },
        },
      },
    },
  })
);

Customize link hover underline highlight material-ui

5 Answers5

Component:

Style: