React中导航栏激活链接样式不生效问题排查

你遇到的问题核心原因是CSS Modules的类名映射机制：你通过import styles from "./styles.module.css"引入了模块化样式，但在组件里仍使用普通字符串"active"作为类名，这不会被CSS Modules识别为对应的模块化类名，导致样式无法绑定到元素上——哪怕网页检查器能看到类名，样式也不会生效。

下面是具体的解决方法：

方法一：使用CSS Modules的类名引用（推荐） #

直接修改CustomLink组件中<li>的类名写法，用styles.active替代字符串"active"：

function CustomLink({ to, children, ...props }) {
    const resolvedPath = useResolvedPath(to);
    //needs path to fully match, reconsider if adding querying from URL in future
    const isActive = useMatch({path: resolvedPath.pathname, end: true});
    return (
        <li className={isActive ? styles.active : ""}>
            <Link to={to} {...props}>
                {children}
            </Link>
        </li>
    )
}

你的CSS代码可以完全保持不变：

.active{
    background-color: #30BCED;
}

修改后，CSS Modules会自动将.active编译成唯一的类名（比如styles-module-active-123），同时组件里的styles.active会对应这个编译后的类名，样式就能正常生效了。

方法二：使用全局类名（不推荐，仅适合特殊场景） #

如果你需要保留全局的active类名，不想用模块化的类名，可以在CSS中用:global()包裹类名：

:global(.active){
    background-color: #30BCED;
}

这种情况下，组件里的className={isActive ? "active" : ""}写法可以保持不变，但会失去CSS Modules的样式隔离特性，可能引发类名冲突。

验证修改效果后，网页检查器里的<li>元素会显示正确的类名，对应的背景色样式也会成功应用。

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