使用React CSS Modules时NavLink的active类样式不生效问题

CSS Modules 会自动给所有自定义类名添加哈希后缀实现样式隔离，你样式表中声明的.active类最终会被编译为类似active_{随机哈希}的格式，而react-router-dom的NavLink组件默认添加的激活类是纯字符串active，二者类名无法匹配，因此样式不会生效。其余样式可以正常生效是因为你通过CSSModule.类名的方式引用时，已经自动对应了编译后的哈希类名。

方案1：主动指定激活类名 #

使用NavLink组件提供的activeClassName属性，传入编译后的active类名即可完成匹配。
修改后的组件代码示例：

<li><NavLink to="/" exact activeClassName={CSSModule.active}>Home</NavLink></li>
<li><NavLink to={{
    pathname: "/new-post",
    hash: "#submit",
    search: "?quick-submit"
}} activeClassName={CSSModule.active}>New Post</NavLink></li>

方案2：将active类设为全局样式 #

你可以通过CSS Modules提供的:global()语法，将active类标记为全局类，跳过哈希编译，直接匹配NavLink默认添加的类名。
修改后的样式代码示例：

.Nav ul a:hover,
.Nav ul a:global(.active) {
    border-bottom: 1px solid black;
}

该方案无需修改每个NavLink组件的属性，更适合导航项较多的场景。

请勿将CSS原生:active伪类（鼠标按下未松开时生效）与NavLink添加的.active激活类混淆，二者作用场景完全不同。

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