Possible to use styled syntax from '@emotion/styled' with theme-ui?

Hello,

I wrote some Gatsby themes using Styled Components and their baked in ThemeProvider API to create something similar, but less robust, than theme-ui. Now that themes have officially been released it seems that the “way-to-go” is using the Theme-UI framework and accompanying set of tools. I originally chose Styled Components because I liked the ability to write ‘normal’ CSS using the const Header = styled.header syntax. Coming from more of a CSS/HTML background this made sense to me and let me continue using semi-colons which I was used to while allowing me to also use design tokens which I could pass down to child themes and starter sites using component shadowing.

I am planning to migrate the work I have done to the Theme-UI and Emotion styling systems and was wondering if there was any way to do this while keep the syntax and format I am familiar with, e.g. styled.div or styled.(Img)? And if I do this can I still refer back to the theme-ui theme like I have been doing with the ThemeProvider from styled components? Or is it really best to transition to the {sx} pragma you talk about in the docs? My strong preference is to write old-school normal CSS but with the power of CSS-in-JS.

You can see a bit of what I am trying to do in this repository:

https://github.com/ehowey/gatsby-theme-catalyst-core

It is on NPM but the package on there is a bit out of date as I have been working on it locally in a Yarn workspace.

[chaddjohnson]

I get the following error when using theme-ui with emotion.

const SomeText = styled.div`
  color: ${props => props.theme.colors.primary};
`

Property 'colors' does not exist on type 'object'

Old thread, but for completeness, using the css helper like so should let you reference the theme.

[arnaudjnn]

I get the following error when using theme-ui with emotion.

const SomeText = styled.div`
  color: ${props => props.theme.colors.primary};
`

Property 'colors' does not exist on type 'object'