4

我在 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>
4

3 回答 3

3

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

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

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

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

还有，动机

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

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

于 2020-01-29T06:51:25.667 回答
2

目前 styled-components 使用 MurmurHash 算法创建唯一标识符，然后将哈希数转换为字母名称。

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

const className = hash(componentId + evaluatedStyles);

然后这个类名作为 generateClassName 存储在组件状态中。

于 2020-01-29T06:53:31.783 回答
0

您是否有机会将 Material UI 用于 reactjs？如果是这样，那么只需在 package.json 中检查版本详细信息。如果它的版本附加了“rc”，那么请将其更新到上一个/下一个稳定版本。

于 2020-01-29T06:49:52.397 回答