NextJS 13：路由切换时CSS样式失效问题求助

开发与生产构建环境中，使用Next.js 13.4.6 + styled-components 6.0.0时，路由切换后客户端组件（表单）出现CSS样式异常：

• 偶尔表单完全丢失样式，显示原生输入字段
• 多数情况出现布局错乱
  刷新页面后样式恢复正常。

环境依赖 #

"styled-components": "6.0.0",
"next": "13.4.6",
"react": "18.2.0"

当前Next.js配置（next.config.js） #

// next.config.js
// Load environment variables
require('dotenv').config();

// Validate environment variables
require ('./env.js');

// Next.js configuration
const nextConfig = {
    compiler: {
        styledComponents: true,
    },
};

module.exports = nextConfig;

排查与解决方案 #

• 确认客户端组件标识
  表单组件必须在文件顶部添加'use client'指令，确保styled-components的样式创建逻辑运行在客户端环境，避免服务端渲染时样式不匹配。

• 临时禁用SSR样式注入
  修改next.config.js，关闭styled-components的SSR优化，验证是否为服务端样式注入问题：

  const nextConfig = {
      compiler: {
          styledComponents: {
              ssr: false,
          },
      },
  };
  

  此方法会让样式仅在客户端注入，若问题消失，说明是SSR样式同步异常导致。

• 规范样式定义位置
  不要在组件外部动态生成styled组件（比如根据props生成样式却放在组件外），所有styled组件的定义必须在'use client'组件内部，或确保样式创建的上下文是客户端。

• 升级/降级依赖
  styled-components 6.x和Next.js 13.4.x存在部分兼容性问题，尝试升级Next.js到13.5+稳定版，或降级styled-components到5.3.11版本，看问题是否解决。

• Pages Router需配置自定义Document
  如果你用的是Pages Router，必须在_document.js中配置styled-components的SSR支持，确保服务端渲染的样式能正确注入到页面：

  import Document, { Html, Head, Main, NextScript } from 'next/document';
  import { ServerStyleSheet } from 'styled-components';
  
  export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet();
      const originalRenderPage = ctx.renderPage;
  
      try {
        ctx.renderPage = () =>
          originalRenderPage({
            enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
          });
  
        const initialProps = await Document.getInitialProps(ctx);
        return {
          ...initialProps,
          styles: (
            <>
              {initialProps.styles}
              {sheet.getStyleElement()}
            </>
          ),
        };
      } finally {
        sheet.seal();
      }
    }
  
    render() {
      return (
        <Html>
          <Head />
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    }
  }
  

  App Router模式下无需此配置，Next.js编译器已自动处理SSR样式注入

• 检查样式冲突
  排查是否存在全局样式与styled-components样式冲突，或滥用!important导致路由切换后样式被覆盖的情况。

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