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

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

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