Emotion uses this template literal notation. Is it possible with Theme UI? #1312
-
My understanding is that Theme UI is a wrapper around Emotion. With Emotion, you can do this:
However, I can't find a similar way of wrapping a component into another styled component and the above syntax doesn't work when importing Thoughts? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 4 replies
-
Yep! You’ve got it exactly. Theme UI is a layer on top of Emotion, but @emotion/styled is a dependency, so just use |
Beta Was this translation helpful? Give feedback.
-
Thanks, I understand now. For anyone else reading, I'll paraphrase my confusion :)
Thanks for the help |
Beta Was this translation helpful? Give feedback.
-
What about "Themed"? Not sure if it's being used or would cause confusion, but in my mind it's still close to describing its purpose. |
Beta Was this translation helpful? Give feedback.
Yep! You’ve got it exactly. Theme UI is a layer on top of Emotion, but @emotion/styled is a dependency, so just use
styled
directly like that. If you’d like to style a component,styled(Badge)
etc will work. I use it in production frequently. Theme UI’sStyled
is a totally different thing, a React component for using themestyles.
variants.