简体繁体 English

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

[英]Styled-components vs Emotion - How to reapplicate css`style` function on Styled-components

原文 2020-05-29 21:06:23 8 1 javascript/ css/ reactjs/ styled-components/ emotion

I have a code using Emotion library.我有一个使用Emotion库的代码。 So far, everything works perfectly...到目前为止，一切正常...

But checking the documentation, I saw that Styled-components already absorb some of the features of Emotion library;但是查看文档，我看到Styled-components已经吸收了Emotion库的一些特性； as the use of css in javascript.在 javascript 中使用css 8CBA22E28EB17B5F5C6AE2A266AZ。

But I'm not able to replicate the usage as least similar than Emotion .但我无法复制与Emotion最不相似的用法。

Here is a full example (Using Emotion ):这是一个完整的例子（使用Emotion ）：

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

Basically I want to create a CSS with some dynamic styles (Depending on an array of objects).基本上我想用一些动态的 styles （取决于对象数组）创建一个 CSS。 Works fine and it's clean... but I'm issue is knowing if this code can reapply using Styled-components (using the css notation).工作正常而且很干净......但我的问题是知道这段代码是否可以使用Styled-components重新应用（使用css表示法）。

Something similar to this article (I cannot make it work):类似于这篇文章的东西（我不能让它工作）：

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

Any idea?任何想法？

1 个解决方案

After searching for this functionality on styled-components ;在styled-components上搜索此功能后； in the bottom line, is not possible.归根结底，是不可能的。

Other alternatives are to use CSS Modules , Emotion , styled jsx or similar... but with styled-components is not possible so far.其他替代方法是使用CSS Modules 、 Emotion 、 styled jsx或类似的......但到目前为止还不可能使用styled-components 。