Next.js登录页面classname不显示：样式未在浏览器生效求助

• 适配Next.js路由的样式导入规则

  • Pages Router：全局样式必须在pages/_app.js中导入，组件级样式推荐使用CSS Modules（文件名后缀为.module.css）；若直接在组件内导入全局样式，大概率不会生效。
  • App Router：全局样式要在app/layout.js中导入，组件内使用样式时，必须在组件顶部添加'use client'指令（服务器组件不支持样式渲染），同时优先用CSS Modules避免全局样式污染。

• 规范CSS Modules的使用方式
  如果采用模块化CSS，必须通过导入的样式对象调用类名，不能直接写字符串类名：

  // 正确写法
  import styles from './Login.module.css';
  <span className={styles.loginLabel}>账号</span>
  

  同时检查样式文件内的类名拼写，确保和代码中调用的完全一致——模块化CSS会自动转换类名，直接写字符串无法匹配生成的最终类名。

• 排查选择器优先级冲突
  打开浏览器元素检查器，查看目标元素的样式面板：如果你的样式被划掉，说明被更高优先级的样式（比如全局样式、第三方UI库样式）覆盖。可以临时给样式加!important测试是否生效，或者调整选择器特异性（比如用父元素类名嵌套：.login-container .login-text { ... }）。

• 清除缓存并重启服务
  终止当前Next.js开发服务后重新启动npm run dev，同时用Ctrl+Shift+R强制刷新浏览器清除客户端缓存。Next.js的开发缓存偶尔会导致样式无法实时更新。

• 校验样式文件路径
  确认样式文件的相对导入路径正确，比如组件在app/login/page.js，样式文件在app/login/Login.module.css，导入时要写./Login.module.css而非错误的上层路径。

内容的提问来源于stack exchange，提问作者woogabeen