CSS Modules 在 Next.js 中未生效，通常源于类名命名不匹配：CSS 文件中使用连字符（如 .toolbar-container）时，JavaScript 中需通过驼峰式访问（如 styles.toolbarContainer），而非直接写 styles.toolbar-container（语法错误）。
css modules 在 next.js 中未生效，通常源于类名命名不匹配：css 文件中使用连字符（如 `.toolbar-container`）时，javascript 中需通过驼峰式访问（如 `styles.toolbarcontainer`），而非直接写 `styles.toolbar-container`（语法错误）。
在 Next.js 的 App Router 架构下，CSS Modules 是推荐的组件级样式方案，但其工作机制依赖于严格的命名映射规则。你提供的代码中，.Toolbar.module.css 定义了 .toolbar-container 这一 CSS 类，而组件中却尝试通过 styles.toolbarContainer 访问——这看似合理，实则隐含一个关键前提：CSS 类名必须符合 JavaScript 标识符规范，才能被自动转换为驼峰式属性名。
✅ 正确做法是二者保持语义一致且技术兼容：
- 若 CSS 中定义 .toolbar-container，Next.js 会自动将其编译为 toolbarContainer 属性（连字符转驼峰），因此 styles.toolbarContainer 可正常访问；
- 但前提是：该类名在 CSS 中必须存在且拼写完全一致，且 React 组件中不能出现非法 JS 表达式写法（如 styles.toolbar-container 是语法错误，因 - 被解析为减号运算符）。
你的原始代码实际已接近正确，问题极可能出在以下任一环节：
? 1. 检查 CSS 类名与 JS 引用是否严格对应
/* ./components/Toolbar.module.css */
.toolbar-container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
background: grey;
}
// ./components/Toolbar.tsx
import styles from "./Toolbar.module.css";
export default function Toolbar({ title = "Social Media App" }) {
return (
<div classname="{styles.toolbarContainer}"> {/* ✅ 正确：驼峰式引用 */}
<h1>{title}</h1>
</div>
);
}
⚠️ 注意：styles.toolbar-container 是非法 JS 语法，会导致运行时报错或 undefined；务必使用 styles.toolbarContainer。
? 2. 验证文件路径与扩展名
- 确保文件名为 Toolbar.module.css（而非 Toolbar.css 或 Toolbar.scss）；
- 确保路径准确：./components/Toolbar.module.css 与 Toolbar.tsx 同级；
- Next.js 仅对 .module.css（或 .module.scss 等）后缀启用 CSS Modules，普通 .css 文件会被视为全局样式。
? 3. 快速调试技巧
在组件中临时添加日志，确认样式对象是否加载：
console.log("CSS Module keys:", Object.keys(styles));
// 应输出 ['toolbarContainer']（而非 ['toolbar-container']）
若输出为空数组或不含预期键名，说明模块未被识别——常见原因包括：
- 文件未保存或热更新未触发；
- .module.css 文件存在语法错误（如未闭合的 {）；
- IDE 缓存导致类型推断失效（可重启 TypeScript Server）。
✅ 最佳实践建议
- 命名优先采用驼峰式 CSS 类（如 .toolbarContainer），避免连字符，彻底规避转换歧义；
- 使用 VS Code 插件 CSS Modules 或 Tailwind CSS IntelliSense 提升类名自动补全体验；
- 在 next.config.js 中无需额外配置——Next.js 默认支持 CSS Modules（截至 v14.2+）；
- 避免在服务端组件（Server Component）中导入任何 CSS（包括 .module.css），所有样式导入必须位于 'use client' 组件或 layout.tsx / page.tsx 中。
? 总结
CSS Modules 的核心契约是：CSS 类名 → 自动驼峰化 → JavaScript 对象属性。只要确保 .toolbar-container 存在于 CSS 文件中，且以 styles.toolbarContainer 形式调用，样式必能正确注入。无需修改构建配置，也不涉及重复加载等高级问题——这是基础但易忽略的命名约定问题。修复后，样式将立即生效，并享受局部作用域、哈希化类名、零冲突等 CSS Modules 原生优势。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
