React JSX如何无需styles变量直接使用组件作用域SCSS Module样式

.module.scss是CSS Modules的约定命名格式，构建工具（Webpack/Vite等）识别到该后缀的文件时，会默认启用CSS Modules规则，把文件内所有类名编译为带哈希值的全局唯一名称（例如.BackgroundKim会被编译为类似.BackgroundKim_a1b2c3的格式），从机制上避免跨组件样式污染。
这种编译逻辑下，你直接写字符串形式的className='BackgroundKim'，根本匹配不到编译后带哈希的实际类名，样式自然无法生效。

你可以根据项目是否需要样式隔离能力，选择对应方案：

• 方案1：不需要样式隔离（适合个人/小型项目，无类名冲突风险）
  直接把文件重命名，去掉文件名里的.module后缀，比如把RegisterComponent.module.scss改成RegisterComponent.scss。
  重命名后构建工具不会对这个文件启用CSS Modules，类名会原样输出到最终CSS里，你期望的写法可以直接生效：

  import './RegisterComponent.scss'
  <div className='BackgroundKim'>
  

  注意：这种写法下所有类名是全局生效的，需要自行保证不同组件的类名不重复，否则会出现样式互相覆盖的问题。

• 方案2：需要保留CSS Modules样式隔离能力（适合中大型/团队协作项目）
  如果不想丢失样式隔离的特性，只是觉得styles.xxx的前缀写法繁琐，可以引入构建插件自动完成类名映射，不需要手动写前缀：

  1. 安装适配你项目构建链的插件，比如React+Webpack项目用babel-plugin-react-css-modules，Vite+React项目可以用对应Vite生态的CSS Modules自动映射插件
  2. 按插件说明完成简单配置后，直接用styleName属性写类名即可，不需要手动导入styles变量，插件会在构建阶段自动把类名映射到编译后的哈希值，写法如下：

  import './RegisterComponent.module.scss'
  <div styleName='BackgroundKim'>
  

• 不推荐的折中方案
  如果你非要保留.module.scss后缀、也不想修改构建配置，可以在SCSS文件里把需要直接使用的类名包裹在:global块内，块内的类名不会被编译加哈希：

  // RegisterComponent.module.scss
  :global {
    .BackgroundKim {
      /* 写你的样式规则 */
    }
  }
  

  这种写法和去掉.module后缀的效果完全一致，类名是全局的，但保留module后缀很容易给后续维护的开发者造成误导，非特殊场景不建议使用。

如果是多人协作的中长期维护项目，更建议保留原生CSS Modules的styles.xxx写法，看似每次多写了几个字符，但能完全规避全局类名冲突的隐患，长期维护的收益远高于写前缀的成本。

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