如何使用开发工具轻松检查样式组件？

Question

我在 React 项目中使用样式组件。当组件在浏览器中呈现时，它们会被分配一个随机生成的 class 名称，例如：

<div class="sc-KSdffgy oPwefl">

这个 class 名称不能帮助我识别 <div> 来自哪个组件，所以有没有办法轻松做到这一点？

P.s。目前我正在向我的样式化组件添加属性，以便我可以在开发工具中识别它们，例如：

const Foo = styled.div.attrs({
   'data-id': 'foo'
})`
    ...
`;

Answer 1

这正是我们创建 Babel plugin 的原因，在使用它时，您将获得 class 包含您为组件指定的名称的名称：

<div class="Sidebar__Button-KSdffgy oPwefl">

除此之外，我们还设置了生成组件的 displayName，这意味着在您的 React DevTools 中，您将看到实际的组件名称，而不仅仅是

或 .

要使用 Babel 插件，请使用 npm install --save-dev babel-plugin-styled-components 安装它，然后将其添加到您的 Babel 配置中：（例如，在您的 .babelrc 中）

plugins: ["styled-components"]

就是这样！调试愉快

请注意，如果您使用的是 create-react-app，则无法更改 Babel 配置。我使用并推荐 react-app-rewired to be able to change configurations without having to eject. We've also built react-app-rewire-styled-components，它会自动为您集成 styled-components Babel 插件！

Answer 2

我正在考虑做同样的事情，偶然发现了以下内容作为 attrs 的替代品：

const Section = styled.div`
  background-color: #06183d;
  color: white;
  padding: 16px;
  margin-top: 16px;
  ${breakpoint("md")`
    border-radius: 5px;
  `}
`

Section.defaultProps = {
  "data-id": "Section"
}

使用 React.Component 的 defaultProps。它使对 styled.div 的调用更清晰，并且在需要时应该更容易删除。

结果：

Answer 3

对于使用 create-react-app 的任何人，另一种选择是使用 styled components babel macro

npm install --save babel-plugin-macros
在您的组件内部使用 import styled from 'styled-components/macro'; 而不是 import styled from 'styled-components';

您现在应该会在您的开发工具中看到组件名称：

Answer 4

如果您使用 ts-loader 或 awesome-typescript-loader，则有 typescript-plugin-styled-components。

Answer 5

对于任何使用 create-react-app 的人，只需替换为

import styled from "styled-components";

至

import styled from "styled-components/macro";

这将使您的 styled-component classes 中包含其组件的名称。只需查看它们的 class 名称，您就可以知道哪些 class 指的是哪些组件 ;)

如何使用开发工具轻松检查样式组件？

How to easily inspect styled-components using dev tools?

styled-components