CSS Module场景下无法用高优先级id选择器覆盖class样式问题

你遇到的问题本质是CSS Module的编译机制导致的：CSS Module会默认对文件内所有的类选择器、ID选择器都添加模块哈希后缀，避免全局命名冲突。你在styles.module.css中写的div#qumultiline经过编译后，ID会被加上哈希后缀，变成类似div#styles_qumultiline__iXUv1的形式，而你实际渲染到页面上的元素ID是纯字符串qumultiline，二者无法匹配，所以ID样式始终不生效，这也是两个样式放在同一个CSS Module文件中问题依旧存在的原因。

• 方案1：将ID选择器标记为全局不编译
  在CSS Module文件中，用:global()语法包裹需要保留原名的ID选择器，告诉CSS Module不要对该选择器加哈希后缀，修改后的styles.module.css代码如下：

.qumultiline {
  background-color: #006699;
  color: white;
}

:global(div#qumultiline) {
  background-color: red;
  color: red;
}

修改后编译出的ID选择器就是原生的div#qumultiline，可以和页面元素匹配，且ID优先级高于类选择器，样式会正常覆盖。

• 方案2：将覆盖样式放到全局CSS文件中
  如果你的覆盖样式本来就存放在独立文件，可以将该文件命名为不带.module.css后缀的普通CSS文件（比如global.css），在项目入口文件或对应组件中引入该全局CSS，直接在里面写div#qumultiline的样式即可。普通CSS不会经过CSS Module的哈希编译，选择器会原样生效。

• 方案3：用更高优先级的类组合实现覆盖
  如果不想使用全局ID，也可以在CSS Module中定义更高优先级的类选择器，比如.qumultiline.override，然后在组件的className属性中拼接对应的类名，同样可以实现样式覆盖，避免引入全局命名。

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