How to get rid of underline for Link component of React Router?

Question

I have the following:

How do I get rid of the blue underline? The code is below:

Answer 1

Working for me, just add className="nav-link" and activeStyle{{textDecoration:'underline'}}

<NavLink className="nav-link" to="/" exact activeStyle= 
  {{textDecoration:'underline'}}>My Record</NavLink>

Answer 2

I think the best way to use react-router-dom Link in a MenuItem (and other MaterialUI component such as buttons) is to pass the Link in the "component" prop

<Menu>
   <MenuItem component={Link} to={'/first'}>Team 1</MenuItem>
   <MenuItem component={Link} to={'/second'}>Team 2</MenuItem>
</Menu>

you need to pass the route path in the 'to' prop of the "MenuItem" (which will be passed down to the Link component). In this way you don't need to add any style as it will use the MenuItem style

Answer 3

Look here -> https://material-ui.com/guides/composition/#button.

This is the official material-ui guide. Maybe it'll be useful to you as it was for me.

However, in some cases, underline persists and you may want to use text-decoration: "none" for that. For a more cleaner approach, you can import and use makeStyles from material-ui/core.

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() => ({
    menu-btn: {
        textDecoration: 'none',
    },
}));

const classes = useStyles();

And then set className attribute to {classes.menu-btn} in your JSX code.

Answer 4

I see you're using inline styles. textDecoration: 'none' is used in child, where in fact it should be used inside <Link> as such:

<Link to="first" style={{ textDecoration: 'none' }}>
  <MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>

<Link> will essentially return a standard <a> tag, which is why we apply textDecoration rule there.

I hope that helps

Answer 5

I have resolve a problem maybe like your. I tried to inspect element in firefox. I will show you some results:

1. It is only the element I have inspect. The "Link" component will be convert to "a" tag, and "to" props will be convert to the "href" property:

2. And when I tick in :hov and option :hover and here is result:

As you see a:hover have text-decoration: underline. I only add to my css file:

a:hover {
 text-decoration: none;
}

and problem is resolved. But I also set text-decoration: none in some another classes (like you :D), that may be make some effects (I guess).

Answer 6

Well you can simply use this piece of code in your scss file; This will remove that unwanted color change,

a:-webkit-any-link {
  &:hover {
    color: white;
  }
}

---