减少接下来的样式组件类名长度

Question

当styled-components在Next中与React一起使用时，确保样式组件正确渲染可能会变得具有挑战性。为了解决这个问题，Next提供了如下compiler.styledComponents标志：next.config.js

compiler: {
    styledComponents: true
}

然而，当启用此标志时，会导致类名变得不可读，因为它们的大小呈指数级增加。

compiler.styledComponents下图说明了禁用和启用时类名称的差异。

compiler.styledComponents 未设置时：

何时compiler.styledComponents 设置：

有没有办法将类名称大小减少到常规sc-XXXXXX名称？

我应该注意，我们没有使用最新版本的Next，而是next@12.3.4

Answer 1

禁用displayName于babel-plugin-styled-components

感谢 @vlad-vladov 指出了这方面的文档。

在Next.js 编译器的 Next.js 12 和 13 文档中，指出 Next.js 正在使用 的端口babel-plugin-styled-components，并且该displayName选项在开发中默认启用，在生产中禁用。的文档babel-plugin-styled-components说明了有关该选项的以下内容displayName：

此选项通过更丰富的输出增强了每个组件上附加的 CSS 类名称，以帮助识别 DOM 中的组件，而无需使用 React DevTools。在您的页面源代码中，您将看到：<button class="Button-asdf123 asdf123" />而不仅仅是<button class="asdf123" />.

要禁用displayName，只需输入false：

module.exports = {
  compiler: {
    styledComponents: { displayName: false }
  }
}

为了进一步解释为什么类名如此长，该选项（默认情况下启用）会在启用时fileName将当前文件的名称添加到 的开头。displayName