有时我看到的导入略有不同
import styled, { withTheme } from "styled-components/macro";
import styled, { withTheme } from "styled-components";
由于它们具有相同的功能,因此我无法理解它们之间的区别,也无法谷歌任何可以提供帮助的东西。
答案 0 :(得分:3)
在生产中,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
。