是否可以在生成的样式组件类之前添加自定义类？

Posted 2023-03-15

【中文标题】是否可以在生成的样式组件类之前添加自定义类？

【英文标题】：Is it possible to prepend the generated styled-component classes with a custom class?

【发布时间】：2021-01-17 05:17:25

【问题描述】：

是否可以在项目的样式组件的输出中为所有类添加一个固定字符串？

例如

class="sc-fznyAO"

会变成

class="myProjectOne-sc-fznyAO"

我在同一页面上运行了几个已编译的项目，每个项目都是专用 .js 文件中的一个反应应用程序。将所有随机生成的哈希添加到生成它的项目中，这确实有助于提高可读性和特异性。

目前尝试使用import styled from 'styled-components/macro'; 导入样式组件。这提供了更多的控制和特异性。但我并不是真的在寻找控制每一个元素。这些都可以保持随机散列，我只想为每个项目在每个类前面添加相同的字符串。 我认为这在 webpack 配置中的某个地方应该是可能的，但我似乎找不到它。

【参考方案1】：

下面是一个例子，它会给你一个前置类名

export const Example = styled("div").withConfig( displayName: "myProjectOne" )(
  css`
    width: 100%;
  `
);

【讨论】：

displayName 似乎是正确的方向，您知道是否有一种方法可以一次性为所有样式组件设置 dispalyName，而不是为每个单独的样式组件设置？就像在 webpack 配置中一样？