Multiple styletron trees on a page

Question

I don't render my whole page with React, but rather I have portions which are their own React trees. These can be menus, etc. Due to the nature of contexts, I don't believe Styletron can know about other Styletron trees on the page, which will likely result in duplicated atomic classes. Is that correct, or is there some black magic happening that would allow multiple trees to work well on the same page?

Answer 1

Thanks for the tip. I had the same issue and had no idea what's happening but your question set me on a correct path.

Now I instantiate Styletron for each component this way and that kind of ensures class names are unique:

const engine = new Styletron({ prefix: `s${shortid.generate()}_` });