样式组件和样式组件/宏之间有什么区别

Question

有时我看到的导入略有不同

import styled, { withTheme } from "styled-components/macro";
import styled, { withTheme } from "styled-components";

由于它们具有相同的功能，因此我无法理解它们之间的区别，也无法谷歌任何可以提供帮助的东西。

Answer 1

在生产中，styled-components 为 .eeZmbc 或 .ZzNLl 等 css 类生成唯一的哈希值。这些用于节省空间，但对开发人员没有用。

对于开发中的语义类名称，存在 babel plugin。它生成类似于 .Navbar__Item-sc-14eztoj-1 中的 .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。