MUI Component styling not working with renderToStaticMarkup

[david-ic3]

I raised the question in MUI that asked me to put it here, here I am : mui/material-ui#36496

---

Not sure how to reopen closed issue, so I open another one ( mui/material-ui#33864 and #2102 )

Link to live example:

https://codesandbox.io/s/autumn-morning-3mdyj7?file=/demo.tsx

Result :
The emotion cache is not getting styles, so it's not possible to inject them back to the 'actual' react node.

Context :
We have in our React application components done in javascript that can have some custom renderers done in React (small components). We need to get the html of those and inject in javascript, including styling.

It's a regression we had moving to React 18

[knutmarius]

Also having a similar problem where I need to render some react components to strings in order to work with non-react libraries, and the styles are messed up after moving to React 18. The workaround I have found is quite dirty and I'd really like to be able to solve this in a more proper way. Did you find a solution for this, @david-ic3 ?

[david-ic3]

@knutmarius , what we do is ensuring React components that support renderToStaticMarkup do not use styled components (it's a few components only for us). Looks as neither MUI or Emotion-JS want to fix this :-(