React组件样式被当作全局样式的原因及解决方法

原因 #

• CSS本身是全局作用域的，不管在哪个组件里引入CSS文件，里面的选择器都会作用于整个DOM树。你在main.css里写的h1 { color: red; }和sub.css里的h1 { color: blue; }都是全局选择器，会匹配页面上所有的<h1>元素。
• 当两个CSS文件中选择器优先级相同时，后引入的样式会覆盖先引入的，所以引入sub.css后所有h1都会变成蓝色。

修复方法 #

1. CSS Modules（推荐） #

这是React项目中处理样式隔离最常用的方案，它会自动给每个CSS类名添加唯一哈希后缀，确保样式只作用于当前组件。

• 配置：在Create React App中，只需将CSS文件名改为[name].module.css格式（比如main.module.css、sub.module.css），框架会自动启用CSS Modules。
• 使用示例：
  Main组件代码：

  import styles from './main.module.css';
  
  function Main() {
    return <h1 className={styles.title}>Main组件标题</h1>;
  }
  

  main.module.css代码：

  .title {
    color: red;
  }
  

  同理，Sub组件使用sub.module.css中的类名，即可实现样式隔离。

2. 手动添加组件唯一类名前缀 #

给每个组件的根元素添加唯一类名，在CSS中通过嵌套选择器限制样式作用范围。

• 示例：
  Main组件代码：

  import './main.css';
  
  function Main() {
    return (
      <div className="main-component">
        <h1>Main组件标题</h1>
      </div>
    );
  }
  

  main.css代码：

  .main-component h1 {
    color: red;
  }
  

  Sub组件代码：

  import './sub.css';
  
  function Sub() {
    return (
      <div className="sub-component">
        <h1>Sub组件标题</h1>
      </div>
    );
  }
  

  sub.css代码：

  .sub-component h1 {
    color: blue;
  }
  

3. CSS-in-JS（如styled-components） #

直接在JS文件中定义组件样式，样式会自动与组件绑定，不会产生全局污染。

• 先安装依赖：npm install styled-components
• 示例：
  Main组件代码：

  import styled from 'styled-components';
  
  const StyledH1 = styled.h1`
    color: red;
  `;
  
  function Main() {
    return <StyledH1>Main组件标题</StyledH1>;
  }
  

  Sub组件代码：

  import styled from 'styled-components';
  
  const StyledH1 = styled.h1`
    color: blue;
  `;
  
  function Sub() {
    return <StyledH1>Sub组件标题</StyledH1>;
  }
  

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