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

Question

我正在使用 Preact 与 styled-components（故事书）和 webpack 来构建我的项目

我有一个名为 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