Next.js 中 CSS Modules 样式不生效的典型原因与正确用法详解-js教程-PHP中文网

CSS Modules 在 Next.js 中未生效，通常源于类名命名不一致（如 CSS 中用 .toolbar-container，JS 中却引用 styles.toolbarContainer）或非法 JS 属性访问（如 styles.toolbar-container 因连字符被解析为减法运算），正确做法是统一使用 PascalCase 类名并确保导入路径无误。

css modules 在 next.js 中未生效，通常源于类名命名不一致（如 css 中用 `.toolbar-container`，js 中却引用 `styles.toolbarcontainer`）或非法 js 属性访问（如 `styles.toolbar-container` 因连字符被解析为减法运算），正确做法是统一使用 pascalcase 类名并确保导入路径无误。

在 Next.js 的 App Router 项目中，CSS Modules 是推荐的组件级样式方案，但其生效依赖严格的命名约定与导入规范。你提供的代码中，核心问题在于 CSS 类名与 JavaScript 引用名不匹配，这是导致样式完全不渲染的最常见原因。

? 问题定位：连字符（hyphen）引发的命名断层

你的 CSS 文件定义了：

/* ./components/Toolbar.module.css */
.toolbar-container {
  width: 100%;
  display: flex;
  /* ... 其他样式 */
}

而 React 组件中却这样使用：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

// ./components/Toolbar.tsx
import styles from "./Toolbar.module.css";

<div classname="{styles.toolbarContainer}"> {/* ❌ 错误：不存在该属性 */}<p>⚠️ 注意：CSS 文件中的 .toolbar-container 在编译后会被自动转换为一个合法的 JavaScript 属性名 —— <strong>toolbarContainer（PascalCase）</strong>，而非保留连字符形式。因此：</p>
<ul><li>
<p>✅ 正确写法（CSS 与 JS 严格对应）：</p>
<pre class="brush:php;toolbar:false;">/* Toolbar.module.css */
.toolbarContainer {
  /* ... */
}

{/* Toolbar.tsx */}
<div classname="{styles.toolbarContainer}">
<li>
<p>❌ 错误写法（即使 CSS 语法合法，JS 无法访问）：</p>
<pre class="brush:php;toolbar:false;">.toolbar-container { } /* 合法 CSS，但生成的 JS 属性名为 toolbarContainer */

styles.toolbar-container // ❌ 语法错误：相当于 styles.toolbar - container（减法运算）
styles["toolbar-container"] // ⚠️ 技术上可行但不推荐，破坏类型安全且易出错

✅ 正确实践：三步确保 CSS Modules 生效

统一使用 PascalCase 类名（推荐）
避免连字符，直接使用驼峰命名，语义清晰且零配置兼容：

/* ./components/Toolbar.module.css */
.toolbarContainer {
  width: 100%;
  display: flex;
  flexDirection: row; /* 注意：CSS 属性名仍用 kebab-case，仅选择器名用 PascalCase */
  alignItems: center;
  padding: 20px;
  backgroundColor: grey;
}

.toolbarTitle {
  fontSize: 1.5rem;
  margin: 0;
}

在客户端组件中正确导入与使用
确保组件是客户端组件（若含交互逻辑），并静态导入模块：

// ./components/Toolbar.tsx
"use client"; // ✅ 若使用事件、state 等客户端特性，必须声明

import styles from "./Toolbar.module.css";

export default function Toolbar({ title = "Social Media App" }) {
  return (
    <div classname="{styles.toolbarContainer}">
      <h1 classname="{styles.toolbarTitle}">{title}</h1>
    </div>
  );
}

验证构建产物与 DevTools
运行 npm run dev 后，打开浏览器开发者工具 → Elements 面板，检查

元素是否具有类似 className="Toolbar_module__toolbarContainer__abc123" 的哈希化类名；同时在中应看到注入的