Theme-ui: Is Theme UI compatible with Styled Components?

Created on 14 Nov 2019  路  4Comments  路  Source: system-ui/theme-ui

I have an existing component library set up with Styled Components + Styled System. Now trying to integrate dark mode, and upon switching over from SC <ThemeProvider /> to the Theme UI alternative, I can't seem to get it working.

Am I doing something wrong or will I need to switch all my components to use Emotion instead of SC?

picture kiastorm-zz
👍3

Most helpful comment

Sorry for the delayed response! Generally, I think it would make more sense to use only one CSS-in-JS library and Theme UI uses Emotion, but you can technically use both libraries together

picture jxnblk on 2 Jan 2020
👍3

All 4 comments

Theme UI is built with Emotion, and while it generally shouldn't clash with Styled Components, the theming context in the two libraries is not shared

jxnblk picture jxnblk on 14 Nov 2019

So in order to continue to use my components, many of which are built using Styled Components + Styled System's themed css function, AND integrate Theme UI - I will need to switch over to Emotion?

If so that's fine, I just want to be clear before investing the time into switching over.

kiastorm-zz picture kiastorm-zz on 15 Nov 2019

@kiastorm Did you end up needing to switch to emotion?

coreybruyere picture coreybruyere on 27 Dec 2019

Sorry for the delayed response! Generally, I think it would make more sense to use only one CSS-in-JS library and Theme UI uses Emotion, but you can technically use both libraries together

jxnblk picture jxnblk on 2 Jan 2020
👍3
Was this page helpful?
0 / 5 - 0 ratings

Related issues

chibicode picture chibicode  路  3Comments
mxstbr picture mxstbr  路  3Comments
blummis picture blummis  路  4Comments
vojtaholik picture vojtaholik  路  3Comments
muhajirdev picture muhajirdev  路  3Comments