当在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
的开头。