样式化组件将组件名称添加为 class 名称

Question

我正在使用带有样式组件（故事书）和 webpack 的 Preact 来构建我的项目

我有一个名为 AlphaBarWrapper 的组件，其中有一个名为 StyledAlphabar 的样式化组件。

Styled Components 在呈现时将 AlphaBarWrapper_StyledAlphaBar-sc-[random string] 作为 class 名称添加到我的组件。

我希望这成为标准 sc-[random string] class 名称。我找不到任何文档说明它为什么要呈现这个。

这在标准的 webpack 构建和故事书构建中都会发生，所以我希望有一个选项是我遗漏的。

Answer 1

如果我理解你的问题是正确的，你需要安装 babel-plugin-styled-components。然后在根目录中创建 .babelrc 并放入此代码：

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

documentation

样式化组件将组件名称添加为 class 名称

Styled Components adding component name as class name

webpack

preact

styled-components

storybook