React JS：如何消除组件间的样式覆盖问题？

你遇到的样式覆盖问题，核心原因是React默认的全局CSS没有任何作用域隔离机制：
不管你是在App.js统一导入CSS，还是在对应的load1/load2/load3组件内单独导入CSS，打包工具最终都会把所有CSS文件合并成一份全局生效的样式表。样式最终能不能生效，只看两个判断条件：一是CSS选择器的权重高低，二是样式在最终合并后的文件里的加载顺序。
你现在three.css的样式排在one.css后面，只要和one.css里的选择器权重一致，就会直接覆盖one.css的样式，和你“设计上哪个CSS对应哪个组件”的初始预期完全无关——这也是很多React新手刚接触普通CSS导入时最容易踩的认知坑。

按从临时兜底到根源解决的顺序排列：

• 临时快速兜底：调整CSS导入顺序
  如果你不想改动现有CSS结构，直接调整三个CSS的导入先后顺序就能快速解决问题：把three.css、two.css的导入语句挪到one.css的前面，让one.css成为同权重样式里最后加载的内容，自然就会覆盖前面两个CSS的同优先级样式。但这个方法治标不治本，后续只要新增其他CSS文件，很容易再次打乱顺序出现覆盖问题。
• 根源解决方法1：给每个组件的CSS加专属作用域前缀
  不需要改打包配置，纯手写CSS就能实现隔离：
  1. 给每个加载组件的最外层容器加一个独有的根类名，比如load1.jsx的最外层div加class="load1-wrapper"，load2加class="load2-wrapper"，load3加class="load3-wrapper"
  2. 把对应CSS文件里的所有选择器，都改成以自己组件的根类名开头的格式：
     比如one.css里原来写的.title {color: red}，改成.load1-wrapper .title {color: red}；原来写的button {border: none}，改成.load1-wrapper button {border: none}
     这样一来，不同组件的选择器只会匹配自己范围内的元素，就算类名、标签选择器完全一样，也不会跨组件匹配造成覆盖。
• 根源解决方法2：使用CSS Modules实现自动隔离
  这是React生态最通用的样式隔离方案，完全不需要手动写前缀，步骤非常简单：
  1. 把原有的三个CSS文件重命名，加.module后缀：one.module.css、two.module.css、three.module.css
  2. 在对应的JSX组件内按模块化方式导入CSS：

     // load1.jsx 内的导入语句
     import styles from './one.module.css'
     

  3. 把原来写的字符串类名，替换成从导入的styles对象里取对应的类名：

     // 原来的全局类名写法
     <h3 className="title">加载页面1</h3>
     // 改成模块化写法
     <h3 className={styles.title}>加载页面1</h3>
     

  这种方案下，打包工具会自动给每个类名加唯一的哈希后缀，从根源上避免重名导致的样式覆盖，后续新增组件的CSS也不会互相影响。

常见排查提醒 #

如果你发现就算类名完全不一样，样式还是被覆盖，大概率是你在某一个CSS文件里写了无类名的全局标签选择器（比如h3、a、div这类全页面通用的选择器），这类全局选择器会匹配页面上所有同标签元素，是最容易造成跨组件样式污染的写法，写组件CSS时尽量避免这类无作用域的全局选择器。

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