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

Question

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

Answer 1

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