Next.js中全局CSS在SSR时为什么样式错乱？

小静静提问于 2026-03-29 19:47:14 阅读 15

框架

我在Next.js项目里引入了一个全局的CSS文件，本地开发看着没问题，但一部署到服务器做SSR渲染，页面样式就乱了，有些类名没生效，顺序也不对。

我试过把CSS放在pages/_app.js里用import '../styles/global.css'引入，也确认了只在_app里导入一次。是不是SSR环境下CSS加载顺序有问题？

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

React框架服务端渲染

我来解答赞 1 收藏

反馈

1 条解答

子钊~ Lv1

在Next.js里遇到全局CSS在SSR时样式错乱的问题，多半是跟加载顺序或者具体样式的优先级有关。你可以试试这样：

首先确认你的全局CSS确实只在pages/_app.js里通过import引入一次。然后检查下其他组件里的CSS模块有没有和全局的类名冲突。

如果问题还在，可以考虑给全局样式加点权重。比如你提到的.container和.header，可以改成这样：

.app-container .container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 16px;

}



.app-header .header {

  background: #fff;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}

然后在对应的HTML元素上加上这些父级类名。这样做虽然有点麻烦，但能确保样式的优先级。

另外记得清除浏览器缓存再测试，有时候旧样式会干扰判断。我自己也经常被这种问题搞到头疼，慢慢来吧。

2026-03-29 20:03