Components rendered by React 18 ReactDOMServer don't have CSS classes reflecting their `sx` prop

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Components rendered with ReactDOMServer are given a unique CSS class for the style changes in their sx prop, but this CSS class does not actually get created, so the rendered component is unstyled. Excecption: if the component shares an sx prop with another component that is rendered normally, the CSS is added and rendered correctly.

Expected behavior 🤔

Components rendered with ReactDOMServer should have styles that match the sx prop applied.

Steps to reproduce 🕹

I have created a minimal reproduction on CodeSandbox: https://codesandbox.io/s/nervous-benz-354utb?file=/src/Demo.tsx

Context 🔦

I am working with some non-React JS libraries (in this case, Leaflet) that renders raw HTML strings. If I want to render a component within the context of this library, I must first render the component as a string on the client side (with ReactDOMServer.renderToString() and pass this string to the library. Unfortunately, styling via the sx prop is not possible with this method.

I believe this issue is a duplicate of #30865. This issue does not happen on React 17.

Your environment 🌎

No response