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

What worked for me is this:

<Link to="/" style={{boxShadow: "none"}}>

Answer 2

There's also another way to properly remove the styling of the link. You have to give it style of textDecoration='inherit' and color='inherit' you can either add those as styling to the link tag like:

<Link style={{ color: 'inherit', textDecoration: 'inherit'}}>

or to make it more general just create a css class like:

.text-link {
    color: inherit;
    text-decoration: inherit;
}

And then just <Link className='text-link'>

Answer 3

//CSS

.navigation_bar > ul > li {
      list-style: none;
      display: inline;
      margin: 2%;
    }

    .link {
      text-decoration: none;
    }

//JSX

 <div className="navigation_bar">
            <ul key="nav">
              <li>
                <Link className="link" to="/">
                  Home
                </Link>
              </li>
            </ul>
          </div>

Answer 4

To expand on @Grgur's answer, if you look in your inspector, you'll find that using Link components gives them the preset color value color: -webkit-link. You'll need to override this along with the textDecoration if you don't want it to look like a default hyperlink.

Answer 5

style={{ backgroundImage: "none" }}

Only this worked for me