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

Posted 2023-03-15

【中文标题】样式化的组件添加组件名称作为类名

【英文标题】：Styled Components adding component name as class name

【发布时间】：2021-10-07 14:48:30

【问题描述】：

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

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

样式化组件在渲染时将AlphaBarWrapper_StyledAlphaBar-sc-[random string] 作为类名添加到我的组件中。

我希望这是标准的 sc-[random string] 类名。我找不到任何关于它为什么呈现这个的文档。

这发生在标准 webpack 构建和故事书构建中，所以我希望有一个我缺少的选项。

【参考方案1】：

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

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

documentation

【讨论】：

这解决了我的问题，我将其添加到我的babel.config.json 中。谢谢你:)