时间戳

首页 > 解决方案 > 当我们使用样式化组件时显示随机类？

javascript - 当我们使用样式化组件时显示随机类？

问题描述

我在 React 中使用样式化的组件。每当我在样式化组件中编写样式并且如果在浏览器中加载应用程序时，我都会在开发人员工具的元素选项卡中获得一些随机类名称。我只想知道幕后发生了什么？

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>

)

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

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

标签： javascriptcssreactjsstyled-componentscss-in-js

解决方案

这就是我在 styled-components FAQ中能找到的所有内容

每个节点实际上都有两个与之相连的类：一个是每个组件的静态类，这意味着样式化组件的每个元素都有这个类。它没有任何风格。相反，它用于快速识别 DOM 对象属于哪个样式化组件或在 DevTools 中进行细微更改。它也用于组件选择器。静态类可能看起来像：.sc-fVOeaW.

另一个是动态的，这意味着根据插值结果，具有不同道具的样式组件的每个元素都会有所不同。它可能看起来像.fVOeaW（注意缺少“sc”前缀。）

例如，样式化的组件<Button />每次都会使用相同的静态类进行渲染。如果使用插值更改样式，例如<Button secondary />，则动态类将是不同的，而静态类将保持不变。

还有，动机

没有类名错误： styled-components 为您的样式生成唯一的类名。您永远不必担心重复、重叠或拼写错误。

TL;DR 它们是由 自动生成和维护的styled-components。

推荐阅读