样式化组件和样式化组件/宏之间的区别是什么

Question

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

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

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

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

Answer 1

在生产环境中，样式化组件为.eeZmbc或.ZzNLl等css类生成唯一的散列。它们用于节省空间，但对开发人员在开发中没有用处。

对于开发中的语义类名，存在一个babel plugin。它生成像.FileName__StyledComponent-generatedHash中的.Navbar__Item-sc-14eztoj-1这样的名称，以帮助我们追溯元素/样式的源代码。

因此，如果你使用create-react-app，你可以在不弹出和不添加到babel config的情况下使用这个插件。您只需将导入从styled-components更改为styled-components/macro即可。在IDE中快速查找和替换就可以做到这一点。

所有编译时代码转换都由babel-plugin-macros处理

babel-plugin-macros为想要使用编译时代码转换的库定义了一个标准接口，而不需要用户将babel插件添加到他们的构建系统中(而不是babel- plugin -宏，这在理想情况下已经到位)。

就我个人而言，我手动将babel插件添加到配置文件中，并使用像styled-components这样的标准导入。