Emotion uses this template literal notation. Is it possible with Theme UI?

[dungle-scrubs]

My understanding is that Theme UI is a wrapper around Emotion. With Emotion, you can do this:

import styled from '@emotion/styled'

const Button = styled.button`
  color: turquoise;
`

render(<Button>This my button component.</Button>)

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 Styled from Theme UI

Thoughts?

[lachlanjc]

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’s Styled is a totally different thing, a React component for using theme styles. variants.

[dungle-scrubs]

Thanks, I understand now. For anyone else reading, I'll paraphrase my confusion :)

• Styled (capital "S") is a theme-ui import which provides a different function.

• styled (lowercase "s") is an @emotion import, which is a dependency of theme-ui. However, to use it, you still have to import it from @emotion/styled but you don't have to add it to your package.json.

Thanks for the help

[hasparus]

Thanks @dungle-scrubs. Actually, do you have an idea for a rename? I agree that capitalized Styled might be confusing.

cc @lachlanjc

[dungle-scrubs]

Actually, do you have an idea for a rename?

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.

[lachlanjc]

Yep, this came to mind for me too @hasparus. I never use the component personally, but I think it makes a lot more sense. I’m not sure how we’re handling breaking changes pre-1.0, or maybe we hold the change to 1.0?

[hasparus]

I’m not sure how we’re handling breaking changes pre-1.0, or maybe we hold the change to 1.0?

We'll bump minor.

[hasparus]

I'm actually always renaming this component to s on import to write <s.p> <s.h1>.
Themed looks good IMO.