有时我会看到略有不同的进口
import styled, { withTheme } from "styled-components/macro";
import styled, { withTheme } from "styled-components";
由于它们具有相同的功能，我无法理解它们之间的区别，也无法通过谷歌搜索任何有帮助的内容。
has*_*e72 18
在生产中，样式组件为 css 类（如.eeZmbc或 ）生成唯一的哈希值.ZzNLl。这些用于节省空间，但对于开发人员开发来说没有什么用处。
对于开发中的语义类名，存在babel 插件。它生成类似于.Navbar__Item-sc-14eztoj-1in 的名称.FileName__StyledComponent-generatedHash，以帮助我们将元素/样式追溯到其源头。
因此，如果您使用，create-react-app您可以使用这个插件，而无需弹出，也无需将其添加到babel config. 您只需将导入从 更改styled-components为styled-components/macro。在 IDE 中快速查找和替换即可解决问题。
所有编译时代码转换均由babel-plugin-macros处理
babel-plugin-macros为想要使用编译时代码转换的库定义了一个标准接口，而不需要用户将 babel 插件添加到其构建系统（除了 babel-plugin-macros 之外，理想情况下它已经就位）。
就我个人而言，我手动将 babel 插件添加到配置文件中，并使用标准导入，例如styled-components.