如何从 React <Link> 中删除文本装饰？

Question

这是我的代码片段，我正在尝试从 link 中删除文本装饰。

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

这是我已经尝试过的方法：

.header__links{
text-decoration: none;
}

我试过内联 CSS:

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

然后我也尝试定位标签、ul 标签和 li 标签，但 none 似乎有效。请帮我解决一下。

注意：我知道之前有人问过这个问题，但是 none 解决了我的问题，这就是我问这个问题的原因。

Answer 1

这只是打字错误..

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

Answer 2

好的，我终于找到了原因，我猜是由于某些浏览器配置，这是修复它的代码：

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

Answer 3

我通过向 Link 标签添加内联样式解决了这个问题，如下所示：

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

操作员的内联代码不起作用的原因是他在样式规则中使用了“=”，如下所示：

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

这行不通，因为内联样式是一个对象，由 key-value 对组成，因此需要“:”而不是“=”符号。

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