时间戳

首页 > 解决方案 > 使用 Create React App 调试样式化组件

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

问题描述

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

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

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

标签： reactjsstyled-components

解决方案

我能够找到答案：

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

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

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

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

希望这可以帮助！

推荐阅读