Next.js全局CSS部分样式未生效问题咨询

主要排查点 #

1. CSS优先级被CSS Modules覆盖 #

CSS Modules生成的类名带哈希后缀（比如PostContent__header_xY3z），优先级比global.css里的普通选择器高。如果你的元素同时用了CSS Modules类和global类，或者global选择器不够具体，color这类属性就会被覆盖。

• 验证方法：打开浏览器DevTools的Elements面板，找到目标元素，看Styles标签里的global样式是不是被划掉了。
• 解决办法：
  • 给global.css的选择器提升优先级，比如用body .post-title代替.post-title，或者临时加!important快速验证（不建议长期滥用）。
  • 检查元素的类名应用，确保没有同时使用冲突的CSS Modules类。

2. global.css的导入位置是否正确 #

必须在_app.js/_app.tsx里全局导入，不能在单个组件里局部导入：

// pages/_app.js
import '../styles/global.css'; // 正确的全局导入位置

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

如果在组件内导入，样式范围受限，还可能被组件内的CSS Modules覆盖。

3. 第三方样式或CSS重置的干扰 #

有些UI库或者自定义的CSS重置文件会覆盖color等基础属性。用DevTools的Computed面板查看元素color的最终生效样式，找到是谁覆盖了你的global样式，针对性调整。

关于控制台的两个错误 #

• projection.png 404：如果怀疑和ThreeJS有关，搜索项目里的ThreeJS相关代码，看有没有默认引用这张图的依赖，或者更新ThreeJS版本尝试解决。
• Feather Icons的con属性警告：这是组件传参的类型问题，检查使用Feather Icons的代码，确保con属性传递的是布尔值，或者更新feather-icons的React封装库到最新版本。

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