CSS Modules 会自动将 SCSS 文件中的类名转换为驼峰式（camelCase）导出，若原始类名含连字符（如 .pl-6），则生成的 JS 导出键为 pl6 而非 pl-6，导致 styles.pl-6 报错或返回 undefined。
css modules 会自动将 scss 文件中的类名转换为驼峰式（camelcase）导出，若原始类名含连字符（如 `.pl-6`），则生成的 js 导出键为 `pl6` 而非 `pl-6`，导致 `styles.pl-6` 报错或返回 `undefined`。
在基于 React 的项目中使用 CSS Modules（如 .module.scss）时，一个常见却容易被忽视的问题是：样式类名在 JavaScript 中无法正确访问，表现为 styles.xxx 返回 undefined。根本原因在于 CSS Modules 的类名转换机制——它会将带连字符（-）的 CSS 类名自动转为驼峰式（camelCase）作为模块导出的属性名，且完全忽略数字前的连字符。
例如，你在 Sublayout.module.scss 中定义：
.pl-6 {
padding-left: 6rem !important;
}
.pr-12 {
padding-right: 12rem !important;
}
CSS Modules 编译后实际导出的对象类似：
// styles 对象（运行时打印可见）
{
pl6: "_Sublayout_pl6_1a2b3",
pr12: "_Sublayout_pr12_4c5d6"
}
因此，styles["pl-6"] 或 styles.pl-6（语法错误）均无效；正确写法必须是 styles.pl6 和 styles.pr12。
✅ 正确做法有两类：
-
命名即约定：在 SCSS 中直接使用无连字符的类名（推荐）
/* Sublayout.module.scss */ .pl6 { padding-left: 6rem !important; } .pr6 { padding-right: 6rem !important; } .pl12 { padding-left: 12rem !important; } .pr12 { padding-right: 12rem !important; }对应 JSX 中使用：
<div classname="{`${styles.pl12}">{children}</div> -
保留连字符但用方括号访问（不推荐，破坏可读性与类型安全）
<div classname='{`${styles["pl-6"]}'>{children}</div>⚠️ 注意：TypeScript 不会为 styles["pl-6"] 提供类型提示，且 Webpack/Vite 默认不支持此类动态键的 HMR 热更新，易引发维护风险。
? 额外建议：
- 使用 CSS Modules 官方命名规范：类名应为 lowerCamelCase 或 kebab-case，但需始终以 JS 可导入形式为准；
- 在开发中可通过 console.log(styles) 快速验证实际导出键名；
- 若需响应式间距等通用工具类，建议统一收口到 @payping/web-components 的内置工具类（如 p-6、px-12），避免重复定义；
- !important 应谨慎使用，优先通过 CSS 优先级或组件封装控制样式覆盖。
修正命名后，你的 SubLayout 组件即可正常应用模块化样式，响应式逻辑也将稳定生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
