React项目直接导入CSS后使用className不生效问题咨询

现象原因 #

• 该现象的核心原因是你的项目开启了CSS Modules模块化编译规则，该规则的核心作用是通过对类名做哈希重写，避免不同组件间的全局样式冲突。
• 当你直接使用import './styles.css'导入样式时，构建工具会把你写的.home类名编译为带哈希后缀的字符串，例如home_7fa2，此时你在JSX中写的字符串home和编译后的实际类名不匹配，自然无法生效。
• 当你使用import stat from './styles.css'导入时，stat是构建工具生成的类名映射对象，键为你编写的原生类名，值为编译后带哈希的最终类名，因此stat['home']可以拿到正确的类名，样式正常生效。
• 该现象完全由项目的构建配置决定，和代码写法本身无关。

配置修改方案 #

如果要使用直接导入样式、直接传递字符串类名给className的方式，可根据你使用的构建工具选择对应配置：

Webpack 项目（含未eject的Create React App项目） #

• 如果你希望全局关闭CSS Modules功能：找到webpack配置中处理css文件的rule，删除modules: true相关配置即可。
• 如果你用的是未eject的Create React App项目，无需修改配置，只需要把样式文件的后缀改为.global.css，例如将styles.css重命名为styles.global.css，CRA默认会将带.global后缀的样式文件视为全局样式，不会做类名哈希处理，直接import './styles.global.css'后写className='home'即可生效。

Vite 项目 #

• 打开项目根目录的vite.config.js/vite.config.ts，在配置项中新增/修改css.modules配置：

export default defineConfig({
  css: {
    modules: {
      scopeBehaviour: 'global' // 全局关闭CSS Modules类名哈希
    }
  }
})

• 如果仅需要部分样式为全局样式，不想关闭全局CSS Modules，可以直接在CSS文件中对需要全局生效的类名添加:global标记，例如：

/* styles.css */
:global(.home) {
  /* 你的样式代码 */
}

标记后的类名不会被哈希处理，直接用className='home'即可匹配到对应样式。

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