使用 Create React App 调试样式化组件

【问题标题】：Debugging styled components with Create React App使用 Create React App 调试样式化组件
【发布时间】：2019-07-12 10:51:23
【问题描述】：

我已将 Styled Components 安装到我的 Create React App 中，一切正常，但默认情况下，它附加到元素的类名看起来好像不是基于样式化组件名称（即。@ 987654321@ 应该创建一个类为MyButton-134as23f 的元素。

在 Styled Components 文档中，它说要安装 babel-plugin-styled-components，然后配置 .babelrc 文件，但是，据我了解，在从应用程序中弹出之前，我们无法访问该文件。

那么，当我在 Create React App 中开发应用程序时，如何调试样式化组件？

【问题讨论】：

【解决方案1】：

我找到了答案：

因为 Create React App 是一个零配置应用程序，所以向 .babelrc 文件添加任何内容的唯一方法是从 React 中弹出。

显然，我想保留我的所有工具，并遇到了babel-plugin-macro。它本质上是用户在编译时运行库的一种方式，无需事先配置他们的 Babel 文件。

因此，在将它安装到我的 devDependencies 后，我将导入路径更改为 import styled from 'styled-components/macro，并且您通常需要弹出的所有 Babel 插件功能都是 Styled Components 的标准配置。

如果您对我的回答有任何疑问或问题，请告诉我。

希望这会有所帮助！

【讨论】：