如何在React组件中引入CSS Modules-css教程-PHP中文网

必须将文件命名为.module.css（如Button.module.css）并用import styles from './X.module.css'导入，否则CSS Modules不生效；错误命名或导入方式会导致样式退化为全局、类名无哈希、className为空。

如何在react组件中引入css modules

文件名必须是 .module.css 才生效

React 官方脚手架（如 Create React App、Vite）默认只对匹配 /\.module\.css$/ 的文件启用 CSS Modules。写成 Button.css 或 Button.modules.css 都不行，构建工具会直接跳过模块化处理，结果还是全局样式。

常见错误现象：样式没生效、类名没哈希、DevTools 里看到原始类名（比如 button 而不是 Button_button__abc123）——八成是文件后缀错了。

✅ 正确命名：Button.module.css、Header.module.scss（如果配置了 sass-loader）
❌ 错误命名：Button.css、Button.mod.css、Button.Module.css（大小写敏感，Linux/macOS 下不识别）
注意：重命名后，旧的 import './Button.css' 会报模块未找到错误，必须同步更新 import 语句

import styles from './X.module.css' 是唯一合法导入方式

不能用 import './X.module.css'，也不能用 import styles from './X.css'。前者不会注入任何类名对象，后者根本不会触发模块化逻辑。

导入后得到的是一个普通 JS 对象，键是原始类名，值是编译后的哈希类名。它不是字符串，也不是 DOM API，不能拼接、不能动态计算键名。

✅ 正确用法：className={styles.button}
❌ 错误用法：className="button"（绕过 modules，退化为全局）
❌ 错误用法：className={styles['btn-' + type]}（TS 编译通过但运行时为 undefined，且无警告）
需要条件组合？用 clsx：className={clsx(styles.button, props.primary && styles.primary)}

为什么 className={styles.xxx} 有时返回 undefined

这不是构建失败，而是引用链断了。CSS Modules 不报错，安静地返回 undefined，所以元素最终渲染出空 className=""，样式消失。

排查顺序建议：

shopify-app-react-router

构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G

下载

检查文件是否真叫 Button.module.css（不是 button.module.css —— macOS/Linux 下路径大小写敏感）
检查 import 路径是否和文件位置完全一致（比如组件在 src/components/Button，CSS 就得在同目录下，且 import 写 import styles from './Button.module.css'）
检查 CSS 文件里写的类名是否和 JS 中访问的一致（比如 CSS 里是 .disabled，JS 却写了 styles.disable）