如何移除未选中路由对应的NavLink默认样式，设置为白色无下划线？

问题原因 #

NavLink 最终会渲染为原生的 <a> 标签，浏览器会给 <a> 标签默认添加蓝色字体、下划线的内置样式，该样式优先级高于从父元素 li 继承的样式，因此你给 li 设置的白色字体、无下划线不会生效到未选中的导航链接上。另外你当前只定义了选中状态的 activeClass 样式，没有单独定义未选中状态下导航链接的默认样式。

解决方法 #

有两种常用方案可实现需求，第一种无需修改JSX代码，更便捷：

方案1：直接给导航区域的a标签加默认样式 #

在你的CSS代码中新增如下规则即可：

/* 给导航区域所有a标签设置未选中状态样式 */
.navOptions a {
    color: white;
    text-decoration: none;
}

该规则优先级低于你已经定义的 activeClass，不会覆盖选中状态的紫色样式，符合预期。

方案2：给NavLink指定默认类名 #

如果担心影响导航区域其他a标签的样式，可以给所有NavLink添加统一的默认类名：

1. 修改JSX代码，给每个NavLink加className属性：

<NavLink exact className="nav-link" activeClassName="activeClass" to="/">Home</NavLink>
<NavLink exact className="nav-link" activeClassName="activeClass" to="/advanceFilter">Advanced Search</NavLink>
<NavLink exact className="nav-link" activeClassName="activeClass" to="viewAll">View All</NavLink>

2. 在CSS中新增对应类的样式：

.nav-link {
    color: white;
    text-decoration: none;
}

额外注意 #

你当前CSS代码中的单行注释使用了//，这是不被CSS标准支持的写法，可能会导致后续样式加载异常，建议修改为CSS标准的注释格式/* 注释内容 */。

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