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

Question

I have a code using Emotion library. So far, everything works perfectly...

But checking the documentation, I saw that Styled-components already absorb some of the features of Emotion library; as the use of css in javascript.

But I'm not able to replicate the usage as least similar than Emotion.

Here is a full example (Using Emotion):

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). Works fine and it's clean... but I'm issue is knowing if this code can reapply using Styled-components (using the css notation).

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

Any idea?

Answer 1

After searching for this functionality on 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.