CSS generation not working properly in shadow DOM with Emotion cache enabled

[goldmont]

Are you reporting a bug or runtime error?

Select behaves strangely while applying custom style even though I use Emotion cache.

Issue description

I'm using this library in two different projects, the latter is a clone of the former. Both of them are using a shadow DOM.

In my tests I used the following code (no customizations):

index file:

const shadowrootCache = createCache({
	key: 'shadowroot-cache',
	container: domElement
});

const Root = () => (
	<CacheProvider value={shadowrootCache}>
		<App/>
	</CacheProvider>
);

ReactDOM.render(<Root/>, domElement);

Select component:

<Select
	options={[
		{ label: 'Test', value: 'test' },
		{ label: 'Test 2', value: 'test-2' },
		{ label: 'Test 3', value: 'test-3' }
	]}
/>

In the first project, the Select component looks the same as the one in the storybook:

In the second project, the layout is broken:

Furthermore, aria-live messages are visible in the second project but not in the first one. In which case is it working properly? I want to disable them.

However, only in the second project, the CSS is missing at all. The class names are set in the class attributes but the classes themselves don't exist. Very strange.

First project (CSS classes exist):

Second project (CSS classes don't exist):

Hoping in a prompt reply. I need your help to solve this issue. Thanks.

[goldmont]

UPDATE:

To anyone something similar is happening, here I posted a workaround.