Javascript 当我们使用样式化组件时，会显示随机类吗？

我在React中使用样式化组件。每当我在styled component中编写样式时，如果在浏览器中加载应用程序，就会在developer tools的elements选项卡中获得一些随机类名称。我只是想知道幕后发生了什么

const Button = styled.a`
 display: inline-block;
 border-radius: 3px;
 padding: 0.5rem 0;
 margin: 0.5rem 1rem;
 width: 11rem;
 background: transparent;
 color: white;
border: 2px solid white;
`

render(
 <div>
  <Button
  href="https://github.com/styled-components/styled-components"
  target="_blank"
  rel="noopener"
  primary
>
  GitHub
</Button>
<Button as={Link} href="/docs">
  Documentation
</Button>

const Button=styled.a`
显示：内联块；
边界半径：3px；
填充：0.5rem 0；
保证金：0.5雷姆1雷姆；
宽度：11雷姆；
背景：透明；
颜色：白色；
边框：2倍纯白；
`
渲染(
github
文档

)

如果我们检查开发工具中的元素，我可以看到一些随机类显示如下

<a
  href="https://github.com/styled-components/styled-components"
  target="_blank"
  rel="noopener"
  class = "sc-jDwBTQ "
>
  GitHub
</a>

您是否有可能使用reactjs的材质UI？如果是这样，那么只需在package.json中检查版本详细信息。如果其版本附加了“rc”，则请将其更新为上一个/下一个稳定版本

这就是我在样式化组件中所能找到的全部内容

每个节点实际上有两个连接到它的类：一个是静态的 组件，这意味着样式化组件的每个元素都有这个类。 它没有附加任何样式。相反，它习惯于快速 标识DOM对象所属或要生成的样式化组件 开发工具中的微小更改。它还用于组件选择器。 静态类可能看起来像：

.sc fVOeaW

另一个是动态的，这意味着每个元素都会有所不同 您的样式化组件使用不同的道具，具体取决于 插值会导致错误。它可能看起来像

.fVOeaW

（注意 缺少“sc”前缀。）

例如，样式化组件

将使用 每次都是相同的静态类。如果使用更改样式 插值，如

，则动态类将 是一个不同的类，而静态类将保持不变

而且

没有类名错误：样式化组件为样式生成唯一的类名。你永远不必担心重复、重叠或拼写错误

---

TL；DR它们由

样式化组件自动生成和维护

当前样式化组件使用哈希算法创建唯一标识符，然后将哈希数转换为字母名称

每个具有唯一道具的组件实例都有自己的CSS类名，该类名通过哈希算法、componentId和evaluatedStyles字符串生成：

const className = hash(componentId + evaluatedStyles);

---

然后，该类名以generatedClassName的形式存储在组件状态中。

您好，我们可以应用任何正则表达式来了解Html元素是否为组件类设置了样式吗？Html元素类属性总是从静态类开始，然后是动态类？@shuboy2014似乎您可以基于静态类名做出一个强有力的假设组件是一个样式化的组件（即

sc-

名称空间前缀），但我认为您不应该依赖于此，因为这可能会在任何时候发生变化（尽管不太可能），或者可能会与另一个外部库发生名称空间冲突。样式化组件确实提供了一个实用程序来帮助识别样式化组件。