webpack - 样式化组件添加组件名称作为类名称

Question

我正在使用带有样式组件(故事书)和 webpack 的 Preact 来构建我的项目
我有一个名为 AlphaBarWrapper 的组件内部有一个样式组件，名为 StyledAlphabar .
样式组件正在添加 AlphaBarWrapper_StyledAlphaBar-sc-[random string]渲染时作为我组件的类名。
我希望这是标准 sc-[random string]类名代替。我找不到任何关于它为什么呈现这个的文档。
这发生在标准的 webpack 构建和故事书构建中，所以我希望有一个我缺少的选项。

Answer 1

如果我正确理解您的问题，您需要安装 babel-plugin-styled-components .然后在根目录中创建 .babelcr并放置此代码:

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false, // generate other classname
        "fileName": false, // generate other classname
      }
    ]
  ]
}

documentation