在生产中禁用displayName

Question

我在CRA 2.0应用程序中使用styled-components 4.0。默认情况下，组件名称像这样在DOM中显示

<button class="Button-asdf123 asdf123" />

不只是

<button class="asdf123" />

这对开发非常有帮助。不过，我不知道如何在生产环境中禁用添加到类的组件名称，因为这是多余的？

Answer 1

根据styled components doc，您应该可以通过babel插件的选项对其进行控制

https://github.com/styled-components/babel-plugin-styled-components

基本上，用于生产构建的Webpack配置应如下所示

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false
      }
    ]
  ]
}

由于您使用的是CRA，因此您可能无权访问webpack配置，除非您退出（如果我没记错的话）

如果您使用的是样式化的组件宏，则应通过将此配置放入文件indicated here

中来执行此操作而不会弹出