NextJS 12.2.5中Styled Component Props失效问题咨询

Next.js 文档显示v12.1.0版本的SWC已添加对Styled Components的支持。我当前使用Next.js v12.2.5，不带Props的基础Styled Components可正常运行，但传递Props（如示例中的warning）时失效，且已在next.config.js中配置compiler.styledComponents: true，请问该版本Next.js是否支持带Props的Styled Components？

代码示例 #

// next.config.js 中已添加如下配置
compiler: {
    styledComponents: true,
},

// 传递`warning`Props时该组件无法正常工作
const Wrapper = styled.div`
  background-color: ${props => props.warning ? 'red' : 'blue'}
`

解答 #

Next.js v12.2.5完全支持带Props的Styled Components，你的问题并非版本支持问题，大概率是配置或代码细节导致的，可按以下步骤排查：

• 检查配置结构正确性：确保compiler配置位于nextConfig的顶层，完整配置示例如下：

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

module.exports = nextConfig

• 验证Styled Components版本兼容性：建议使用styled-components@5.3.5及以上版本，过低版本可能与SWC编译器存在适配问题。

• 修复代码语法错误：你示例中的CSS属性末尾缺少分号，这会导致CSS解析失败，修正后的代码：

const Wrapper = styled.div`
  background-color: ${props => props.warning ? 'red' : 'blue'};
`

• 确认Props传递正确性：使用组件时需正确传递warningProps，例如：

<Wrapper warning={true}>警告内容</Wrapper>

• 清除缓存重试：若上述操作无效，删除.next文件夹和node_modules/.cache目录，重新启动开发服务。

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