Styled-components vs Emotion - 如何在 Styled-components 上重新应用 css`style` 函数

Posted 2023-03-16

【中文标题】Styled-components vs Emotion - 如何在 Styled-components 上重新应用 css`style` 函数

【英文标题】：Styled-components vs Emotion - How to reapplicate css`style` function on Styled-components

【发布时间】：2020-09-17 12:47:33

【问题描述】：

我有一个使用 Emotion 库的代码。到目前为止，一切正常...

但是查看文档，我看到Styled-components已经吸收了Emotion库的一些特性；在 javascript 中使用 css。

但我无法复制与Emotion 最不相似的用法。

这是一个完整的例子（使用Emotion）：

https://codesandbox.io/s/grouping-table-head-ant-design-demo-s7hb6?file=/index.js

基本上我想创建一个带有一些动态样式的 CSS（取决于对象数组）。 工作正常而且很干净......但我的问题是知道这段代码是否可以使用Styled-components（使用css 表示法）重新应用。

类似于这篇文章的东西（我不能让它工作）：

https://medium.com/styled-components/announcing-native-support-for-the-css-prop-in-styled-components-245ca5252feb

有什么想法吗？

【参考方案1】：

在styled-components上搜索此功能后；归根结底，是不可能的。

其他替代方法是使用CSS Modules、Emotion、styled jsx 或类似的...但目前还不可能使用styled-components。