React项目分文件引入的module.css出现跨组件样式冲突问题

DevOps 小满

2026-8-27

问题原因

CSS Module 的样式局部隔离能力，默认只对类选择器、ID选择器生效。你在UnderConstruction.module.css里直接写的h1属于原生标签选择器，不会被编译工具添加唯一哈希后缀做作用域隔离，最终会被打包为全局样式。
只要UnderConstruction组件在应用运行过程中被加载过，这份h1样式就会被注入到全局样式表，作用于整个应用所有页面的h1标签，和Intro组件有没有引入这份样式文件没有关系。

修复方案

推荐方案：用类选择器替代裸标签选择器，这是CSS Module的标准用法
1. 修改UnderConstruction.module.css，给h1样式定义类名：
```
.pageTitle {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0 10%;
    text-align: center;
}
```
1. 在UnderConstruction.jsx中给对应的h1标签绑定生成的局部类名：
```
import styles from '../css/UnderConstruction.module.css';

// 组件render部分对应代码
<h1 className={styles.pageTitle}>建设中内容</h1>
```
这种写法下类名会被编译为带唯一哈希的全局唯一值，完全不会出现跨组件样式污染。
备选方案：如果需要直接对组件内的标签做样式限定，可以通过:local()伪类配合组件根类名缩小作用域
1. 给UnderConstruction组件的最外层容器定义类名，用:local()包裹内部的标签选择器：
```
.constructionPage :local(h1) {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0 10%;
    text-align: center;
}
```
1. 给组件最外层根节点绑定styles.constructionPage类名即可，此时样式只会作用于该组件根节点内部的h1标签，不会泄露到组件外部。