Loading Emotion more than once from different libraries like react-select on the same page will conflict and overwrite each other's styling

[conoremclaughlin]

Current behavior:

We're currently using react-select for our Web Extension within Shadow DOM components loaded via content scripts on arbitrary web pages. One of the dependencies of react-select is emotion and if the page our extension loads on uses Emotion, react-select will blow the page author's emotion cache and wipe out the styles on the page. This happens regardless of whether we wrap the react select widget with a CacheProvider and its own cache and unique key to ensure the styles are loaded within the Shadow DOM tree itself rather than the root document. See the following issues:

JedWatson/react-select#4541
JedWatson/react-select#3680

To reproduce:

1. Have basic styling of a page via Emotion.
2. Later load react-select or a CacheProvider with a cache instance within a Shadow DOM component on the same page.
3. Apply basic emotion styles to an element.
4. OR load this component via Web Extension on a page like https://www.startupschool.org/curriculum

Thank you for y'all's amazing work on this project! I'm sorry I haven't contributed a better reproducible example. It sounds like from the other thread in the react-select repo y'all are already aware of this. If it proves to be super helpful, I can work on a reproducible example later but the web extension environment makes it tricky.

Expected behavior:

Instances of emotion caches with different cache ids shouldn't affect each other. Especially if their style root targets are different.

Environment information:

• react version: 16.13.1
• @emotion/react version: 11.1.5