React中的Styled Components，找到对应的组件

Question

styled components 很新，我很喜欢。但是，在构建 React 应用程序时，我当然会在 DOM 中得到很多元素。有时我看到需要更改的样式。但是因为标签是这样的：

<div class="kOs1nAz">content</div>

我很难找到这个标签属于哪个组件。

在您的组件中 debug/find 这些样式的最佳方式是什么？也许有没有办法在类名前加上组件名或类似的东西？

Answer 1

你可以用这个 babel-plugin

解决这个问题

基本上它将样式组件的名称添加到类名列表中。

希望对您有所帮助。

如果您需要更多相关信息，请点击此处docs。

Answer 2

在您的 webpack 配置 - babel 插件中，您必须将 displayName 设置为 true:

['babel-plugin-styled-components', { displayName: true }]

届时 class 名称将不会被缩短。

Answer 3

如果您有权访问 webpack 配置，请按照 Better debugging 的建议添加以下插件：

{plugins: [['babel-plugin-styled-components', { displayName: true }]]}

如果您使用 create-react-app，您可能需要 react-app-rewired 修改 webpack 配置。

如果两者都不适合您，您可以从浏览器检查器工具切换到 Chrome or Firefox.

的 React Dev Tools

在那里，查找树，直到看到组件的名称（不是样式组件，只是从文件中导出的父组件）- 这将帮助您确定要查找的文件。然后，使用选择器工具 select 内部的相关样式组件（例如 styled.button）并查看元素的结构以帮助您在该文件中找到它。

如果您需要在生产版本中进行调试，请确保使用 displayName:

 const MyComponent = ...
 MyComponent.displayName = 'MyComponent'
 export default MyComponent

这将避免像 t 这样的缩小名称。如果您必须在有机会添加可读的显示名称之前进行调试，那么您将不得不依赖 DOM elements class 属性来手动添加 className 的元素，或者检查 React Dev 中的道具名称识别元素的工具...

Styled Components in React, finding the corresponding component