How to remove text-decoration from React <Link>?

Question

This is my snippet, I am trying to remove the text-decoration from the link.

 <ul className="header__links">
              <Link to="/">
                <li>Home</li>
              </Link>
    </ul>

Here is what I have already tried:

.header__links{
text-decoration: none;
}

I tried inline CSS:

<Link to="/" style={{textDecoration='none'}}>

Then i tried targeting a tag, ul tag and li tag too but none of it seems to work. Please help me solve it.

Note: I know this question has been asked before but none of those solved my issue, which is why I am asking it.

Answer 1

Ok I finally found the reason, it was due to some browser configurations i guess, here is the code that fixed it:

a:-webkit-any-link {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

Answer 2

It is just typo..

style={{textDecoration='none'}} => style={{textDecoration: 'none'}}

Answer 3

I solved this issue by adding inline styles to the Link tag, like so:

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

The reason why the op's inline code didn't work was because he used an '=' in his style rule, like so:

<Link to="/" style={{textDecoration='none'}}>

This won't work because the inline style is an object, made up of key-value pairs, thus expecting a ':' and not an '=' sign.