React项目使用SCSS时如何实现渲染后类名唯一？

普通 SCSS 默认是全局作用域，哪怕拆分到不同组件的独立 scss 文件里，同名类编译后还是会全局生效，导致.logo样式互相覆盖，以下是两种可直接落地的解决方式：

• 方案1：使用 CSS Modules（主流脚手架零配置支持，优先推荐）
  主流 React 构建工具（Vite、Create React App、Next.js 等）都默认内置 CSS Modules 支持，不需要额外安装插件：

  1. 将两个组件对应的样式文件后缀改为.module.scss，比如头部组件样式命名为Header.module.scss，侧边栏组件样式命名为Sidebar.module.scss
  2. 组件内以对象形式导入样式文件，类名通过导入的对象引用：

  // Header 组件示例
  import styles from './Header.module.scss';
  
  export default function Header() {
    return (
      <div>
        {/* 原来的className='logo'改成下面的写法 */}
        <img className={styles.logo} />
      </div>
    )
  }
  

  3. scss 文件里正常写.logo类的自定义样式即可，不需要修改选择器写法：

  // Header.module.scss
  .logo {
    width: 120px;
    height: auto;
    // 头部组件专属logo样式
  }
  

  编译后工具会自动给类名拼接文件 hash 等唯一标识，最终生成类似Header_logo__3xKf2、Sidebar_logo__9pLq7的全局唯一类名，从根源上避免冲突。

• 方案2：手动添加组件命名空间（不需要改文件名的兼容方案）
  如果项目不方便改样式文件名、没开启 CSS Modules 支持，可以给每个组件的根节点加全局唯一的父类名，通过 SCSS 嵌套做作用域隔离：

  1. 给 Header 组件最外层容器加className="header-wrap"，Sidebar 组件最外层容器加className="sidebar-wrap"
  2. 各自的 scss 文件里嵌套写.logo样式：

  // Header.scss
  .header-wrap {
    .logo {
      width: 120px;
      // 头部组件专属logo样式
    }
  }
  

  // Sidebar.scss
  .sidebar-wrap {
    .logo {
      width: 60px;
      // 侧边栏组件专属logo样式
    }
  }
  

  编译后选择器为带父类约束的.header-wrap .logo、.sidebar-wrap .logo，样式只会作用在对应组件内部的 logo 元素上，不会互相污染。

注意：如果用方案2，要保证父类名全局唯一，不要出现重名的父类，否则还是会有冲突问题。

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