Next@12.3.4启用styled-components编译后如何缩短类名至sc-XXXXXX？

你可以通过自定义classNameGenerator来实现sc-XXXXXX格式的类名，直接修改next.config.js的styled-components编译器配置即可：

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: {
      // 开启后DevTools中能看到组件的displayName，方便调试（可选）
      displayName: true,
      // 自定义类名生成逻辑
      classNameGenerator: () => {
        // 生成6位随机字符串，拼接成sc-XXXXXX格式
        const randomSegment = Math.random().toString(36).slice(2, 8);
        return `sc-${randomSegment}`;
      },
    },
  },
};

module.exports = nextConfig;

额外说明： #

• 如果想在类名里保留组件标识（比如sc-Header-abc123），可以调整生成函数：

  classNameGenerator: (componentName) => {
    const randomSegment = Math.random().toString(36).slice(2, 8);
    return `sc-${componentName}-${randomSegment}`;
  },
  

• 确保你的styled-components版本和Next.js 12.3.4兼容，推荐使用v5.x系列版本
• 该配置在开发和生产环境均生效，不会影响styled-components的样式渲染逻辑

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