如何去除React <Link>组件的text-decoration下划线样式

1. 修正CSS选择器
   你之前给ul.header__links设置text-decoration无效，因为下划线是Link组件渲染生成的<a>标签自带的默认样式，需要直接选中ul下的a标签设置样式：

/* 直接选中ul内所有Link生成的a标签 */
.header__links a {
  text-decoration: none;
  /* 如有更高优先级样式覆盖，可临时加!important测试，后续再优化选择器优先级 */
  /* text-decoration: none !important; */
}

2. 修正内联样式语法错误
   你之前写的内联样式语法不符合React规范，React内联样式接收的是对象，属性和值之间用冒号而非等号，正确写法如下：

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

3. 可选：调整HTML结构（符合规范避免后续样式异常）
   当前你把Link放在<ul>和<li>之间不符合HTML列表结构规范，调整为如下结构后样式控制会更简单：

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

调整后可以直接给Link添加自定义类名控制样式：

<Link to="/" className="header__link">Home</Link>

.header__link {
  text-decoration: none;
}

如果以上方案还是无效，可以打开浏览器开发者工具的元素面板，选中对应生成的<a>标签，查看样式栏中text-decoration属性被哪条样式规则覆盖，针对性调整选择器优先级即可。

内容的提问来源于stack exchange，提问作者Arpit Pandey