Next.js中CSS模块未在React组件中生效问题求助

核心问题：类名引用不匹配 #

你的CSS模块中定义的类名是.toolbar-container（短横线分隔），但在组件中尝试通过驼峰式的styles.toolbarContainer引用，这会导致无法正确获取对应类名——CSS模块导出的对象键名是原类名的字符串形式（即"toolbar-container"），而非自动转换的驼峰名，最终渲染的元素没有应用正确类名，样式自然不生效。

修复方法（二选一即可） #

方法1：修改组件中的类名引用方式

直接使用原类名的字符串索引来获取样式类：

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

export default function Toolbar({title = "Social Media App"}) {
    return (
        <div className={styles['toolbar-container']}>
            <h1>{title}</h1>
        </div>
    )
}

方法2：统一类名命名风格

将CSS中的类名改为驼峰式，与组件中的引用保持一致：

/* Toolbar.module.css */
.toolbarContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    background: grey;
}

组件中保持className={styles.toolbarContainer}即可。

额外排查点 #

• 文件路径与命名：确认Toolbar.module.css与Toolbar.tsx在同一目录下，文件名拼写完全一致（注意大小写，如toolbar.module.css和Toolbar.module.css在区分大小写的系统中会被视为不同文件）。
• 缓存问题：重启Next.js开发服务器（npm run dev）或清除浏览器缓存后刷新页面，避免缓存导致样式未更新。
• Next.js配置：Next.js 13+ App Router默认支持CSS模块，无需额外配置；若有自定义next.config.js，确保未禁用CSS模块相关设置。

内容的提问来源于stack exchange，提问作者magical-obama