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

Posted 2023-03-15

【中文标题】如何使用开发工具轻松检查样式化组件？

【英文标题】：How to easily inspect styled-components using dev tools?

【发布时间】：2018-01-12 06:47:58

【问题描述】：

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

<div class="sc-KSdffgy oPwefl">

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

附：目前我正在向我的样式化组件添加 attrs，以便我可以在开发工具中识别它们，例如：

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

【参考方案1】：

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

import styled from "styled-components";

到

import styled from "styled-components/macro";

这将使您的样式化组件类在其中包含其组件的名称。并且您只需查看它们的类名就可以知道哪些类引用了哪些组件；）

【讨论】：

@tif 它确实解决了问题，所以是的。伟大的贡献，谢谢！

感谢更新问题@n-joppi

对我不起作用...

【参考方案2】：

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

【参考方案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';

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

【讨论】：

对我不起作用

【参考方案4】：

我正在考虑做同样的事情并偶然发现以下作为 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 的调用更干净，如果需要，应该更容易删除。

结果：

【讨论】：

效果很好！我创建了一个简单的 sn-p 以使其更方便。 "prefix": "cy", "body": [ "$CLIPBOARD.defaultProps = \"data-styled-id\": \"$CLIPBOARD\" ;" ]。基本上它从剪贴板获取 id。

【参考方案5】：

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

<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 以便能够更改配置而无需弹出。我们还构建了react-app-rewire-styled-components，它会自动为您集成 styled-components Babel 插件！

【讨论】：

这很好，但我也想知道 - 有没有办法也可以看到传递给样式化组件的道具？例如，假设我有一个 <Text primary>...</Text>，我想在 devtools 中看到 primary，但目前它也是一个随机生成的类名。

对于任何使用谷歌搜索的人来说，这里的 Webpack 配置是我为了调试目的而获得更好看的类所需要的：styled-components.com/docs/tooling#minification

很棒的答案，对我帮助很大，谢谢！