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

Question

对于样式组件来说相当新，我很喜欢它。然而，在构建 React 应用程序时，我当然会在 DOM 中获得很多元素。有时我会看到需要改变的风格。但因为标签是这样的：

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

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

在组件内调试/查找这些样式的最佳方法是什么？也许有一种方法可以在类名前加上组件名称或类似的名称？

Answer 1

在你的 webpack 配置 - babel 插件中你必须设置displayName为true：

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

那么类名就不会被缩短。