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

Question

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

<div class="sc-KSdffgy oPwefl">

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

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

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

Answer 1

这就是我们创建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，它会自动为您集成样式化组件的Babel插件！

关于styled-components - 如何使用开发工具轻松检查样式化组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45504955/