React项目中.scss样式意外全局生效影响其他组件的原因及解决方法

React 本身没有内置样式隔离能力，项目中引入的.scss 文件最终会被打包工具编译合并到全局 CSS 样式表中。如果你在样式文件里直接写li、p这类裸标签选择器、或者全局类名选择器，只要这个样式文件在项目的任意位置被引入过一次，里面的规则就会对整个应用里所有匹配的DOM节点生效，和你有没有在Footer组件里引入这个样式文件没有关系——只要Home.scss被Home组件引入过，它里面写的全局li规则就会篡改全应用所有li标签的默认样式。

• 使用CSS Modules实现原生样式隔离
  这是Create React App、Vite等主流脚手架默认支持的方案，不需要额外安装依赖：
  1. 把样式文件重命名为[组件名].module.scss格式，比如Home组件对应的样式改为Home.module.scss
  2. 在组件中以对象导入的方式引入样式，类名通过导入的对象绑定：

  // Home.jsx
  import styles from './Home.module.scss';
  export default function Home() {
    return (
      <div className={styles.homeWrap}>
        <li className={styles.listItem}>首页列表项</li>
      </div>
    )
  }
  

  3. 样式文件中尽量避免直接写裸标签选择器，所有样式挂在组件自身的类名下：

  // Home.module.scss
  .homeWrap {
    .listItem {
      // 写li的自定义样式，编译后类名会带唯一哈希，不会污染其他组件
    }
  }
  

• 手动添加组件命名空间隔离
  如果不想改文件名和引入方式，可以给每个组件的根节点设置一个全局唯一的类名作为命名空间，所有组件样式都嵌套在这个根类名下面编写：

  // Home.scss
  .homeComponentRoot {
    // 所有Home组件的样式都写在这个块里
    li {
      // 这里的li样式只会作用在.homeComponentRoot内部的li标签，不会影响Footer等其他组件
    }
  }
  

  对应组件里给最外层标签加上这个根类名即可，注意命名不要和其他组件的根类名重复。
• 采用CSS-in-JS方案
  可以使用styled-components、@emotion/react这类CSS-in-JS库，样式直接和组件绑定编写，天生具备样式隔离能力，不会产生全局样式污染：

  // 以styled-components为例
  import styled from 'styled-components';
  const StyledLi = styled.li`
    /* 这里写li的样式，只会作用在当前组件生成的li上 */
    padding: 8px 12px;
  `;
  export default function Home() {
    return <StyledLi>首页列表项</StyledLi>
  }
  

• 配置构建工具自动加样式前缀
  如果项目使用Vite或者Webpack，可以通过postcss插件配置，在打包时自动给每个组件对应的scss样式加上唯一属性前缀或者类名前缀，不用手动写命名空间，不过这种方式需要修改构建配置，适合对打包流程比较熟悉的场景。

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