Usage of Theme-UI in a widget based project.

[mattscherzer]

Hello.
I'm using theme-ui in a product that's meant to be used as a widget. While working locally and not as a widget everything works fine. Whenever I try to implement it in a website I have issues with overriding CSS due to the websites theme.

Is there a way I can make my theme styling more specific to avoid having something like #website h1 overriding my .theme-ui-generated-class styles?

I was thinking about adding a prefix to my generated classes to have something like #my-widget .theme-ui-class and therefore avoid the overriding by the theme.

[hasparus]

You have to go a few levels of abstraction deeper. Theme UI uses Emotion to generate classes, and Emotion's CacheProvider allows you to specify Stylis plugins.
You can use stylis-plugin-extra-scope by Andarist to prefix your selectors with that #my-widget.

emotion-js/emotion#712 (comment)

[mattscherzer]

Seems exactly what I was looking for. Thank you!

[hasparus]

No problem! Watch out for the version though — this is a bit tricky — Theme UI 0.3 depends on Emotion 10, and Theme UI 0.6.0-alpha depends on Emotion 11, so you'll need a CacheProvider from correct Emotion version depending on which Theme UI version you have.