Next.js 13中styled-components修改代码后样式失效问题求助

你遇到的是Next.js App Router模式下，styled-components开发环境热更新时样式丢失的问题，本质是styled-components 6.x的服务端渲染逻辑和Next.js热更新机制适配不匹配导致的。下面是具体解决步骤：

1. 配置next.config.js #

在项目根目录的next.config.js中启用styled-components的SWC编译插件，替代默认babel处理逻辑：

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig

2. 调整根布局文件（app/layout.tsx） #

将根布局改为客户端组件，通过useServerInsertedHTML和StyleSheetManager管理样式注入，避免热更新时样式被清除：

"use client"

import { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [styleSheet] = useState(() => new ServerStyleSheet())

  useServerInsertedHTML(() => {
    const styles = styleSheet.getStyleElement()
    styleSheet.instance.clearTag()
    return <>{styles}</>
  })

  return (
    <html lang="en">
      <body>
        <StyleSheetManager sheet={styleSheet.instance}>
          {children}
        </StyleSheetManager>
      </body>
    </html>
  )
}

3. 确认样式文件标准写法 #

确保你的./style.ts是styled-components的标准导出格式，比如：

import styled from 'styled-components'

export const BannerWrapper = styled.div`
  /* 自定义样式代码 */
`

export const ImageBannerWrapper = styled.div`
  /* 自定义样式代码 */
`

export const BannerTitle = styled.h1`
  /* 自定义样式代码 */
`

完成以上配置后重启开发服务，修改代码触发热更新时，样式就能正常生效了。

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