当我们使用样式组件时显示随机类? [英] Random classes getting displayed when we use styled components?

问题描述

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

Am using styled components in React. Whenever i write the styles in styled component and if loads the application in the browser am getting some random classes name in the elements tab of developer tools. I just want to know whats happening behind the scene?

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>

)

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

if we inspect and check the element in the developer tools , i can able to see some random classes display like as follow;

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

推荐答案

这就是我在 styled-components 常见问题

This was about all I could find in the styled-components FAQ

每个节点实际上有两个类与之相连:一个是静态的组件，这意味着样式组件的每个元素都有这个类.它没有附加任何样式.相反，它习惯于快速确定 DOM 对象属于或要制作的样式组件DevTools 中的细微变化.它也用于组件选择器.静态类可能类似于:.sc-fVOeaW.

Each node actually has two classes connected to it: one is static per component, meaning each element of a styled component has this class. It hasn't any style attached to it. Instead, it's used to quickly identify which styled component a DOM objects belongs to or to make minor changes in the DevTools. It's also used for component selectors. The static class probably will look something like: .sc-fVOeaW.

另一个是动态的，这意味着每个元素都会不同您的样式组件具有不同的道具，基于什么插值结果.它可能看起来像 .fVOeaW(注意缺少sc"前缀.)

The other is dynamic, meaning it will be different for every element of your styled component with different props, based on what the interpolations result in. It will probably look like .fVOeaW (note the lack of "sc" prefix.)

例如，样式化组件 将使用每次都相同的静态类.如果使用更改样式插值，比如，那么动态类将是一个不同的，而静态类将保持不变.

For example, the styled component <Button /> would render with the same static class every time. If the styles are changed using interpolations, like <Button secondary />, then the dynamic class will be a different one, while the static class would remain the same.

此外，动机

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

No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.

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

TL;DR They are automagically generated and maintained by styled-components.

这篇关于当我们使用样式组件时显示随机类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！