styled-components 和 styled-components/macro 有什么区别？

Question

9

有时我会看到略有不同的导入方式

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

由于它们具有相同的功能，我无法理解它们之间的区别，也无法找到任何可以帮助我的谷歌搜索结果。

- Vitalii Korsakov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hashinclude72 · Accepted Answer

在生产环境中，styled-components会为css类生成唯一哈希值，例如.eeZmbc或.ZzNLl。这样可以节省空间，但对于开发人员来说并没有什么用处。

针对语义化的类名，在开发过程中可以使用一个babel插件。它会生成类似于.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。