当在Next中使用styled-components与React时，确保样式化组件正确渲染可能变得困难。为解决此问题，Next在next.config.js中提供compiler.styledComponents标志，如下所示：
compiler: {
styledComponents: true
}然而，当启用此标志时，它会导致类名变得不可读，因为它们的大小 * 呈指数级 * 增加。
下图说明了禁用compiler.styledComponents和启用compiler.styledComponents时类名的差异。
当compiler.styledComponents * 未设置时：
当compiler.styledComponents * 设置为 * 时：
有没有一种方法可以将类名的大小减少到只有它们的常规sc-XXXXXX名称？
我应该注意的是，我们使用的不是Next的最新版本，而是next@12.3.4
1条答案
按热度按时间r3i60tvu1#
关闭
babel-plugin-styled-components中的displayName感谢@vlad-vladov指出了这方面的文档。
在下一个。js 12和13 docs for the Next。js编译器，说明是Next.js使用的是
babel-plugin-styled-components端口，displayName选项在开发中默认启用，在生产中禁用。babel-plugin-styled-components的文档说明了displayName选项的以下内容：此选项增强了每个组件上附加的CSS类名，具有更丰富的输出，以帮助在没有React DevTools的情况下识别DOM中的组件。在你的页面源代码中，你会看到：
<button class="Button-asdf123 asdf123" />而不是<button class="asdf123" />。要禁用
displayName，只需输入false：为了进一步解释类名为什么这么长，
fileName选项（默认情况下启用）在启用时将当前文件的名称添加到displayName的开头。