使用CSS Module时classList.toggle添加的active类CSS不生效如何解决

问题根因 #

• CSS Module 会对CSS文件中定义的所有局部类名做哈希重命名处理，你在CSS中写的.active最终编译后会变成类似_active_随机字符串的格式，避免全局类名冲突
• 你JS代码中直接通过字符串"active"给DOM加类，添加的是未哈希的纯active类，和编译后的CSS类名不匹配，因此样式不生效
• 静态写死类名时你用的是styles.xxx的写法，会自动读取编译后的哈希类名，所以可以正常匹配样式

解决方法 #

方案1：JS侧使用编译后的类名 #

直接修改toggle的参数，用styles.active获取编译后的哈希类名，修改JS代码如下：

const onClick = (e) => {
  menuList[0].classList.toggle(styles.active);
};

方案2：将active类声明为全局类 #

修改CSS代码，用:global()包裹active类，让它不参与哈希编译，保持原类名：

:global(.active) {
  display: flex;
}

修改后你原来的JS代码不需要改动，直接加"active"字符串即可匹配样式。

验证方式 #

打开浏览器F12元素面板，查看menulist节点的类名：

• 静态绑定的menulist类会显示为带哈希后缀的格式，例如_menulist_xxxxxx
• 你之前动态添加的active是纯字符串格式，和CSS编译后的_active_xxxxxx不一致，修改后两者会完全匹配，样式即可生效

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