Component styling not working with renderToStaticMarkup

[TheAschr]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When I try to use a material-ui component with the renderToStaticMarkup function the styling is not applied.

Expected behavior 🤔

The material-ui styling should be applied to the component.

Steps to reproduce 🕹

1. Create a react app and put this in index.js

import * as React from "react";
import ReactDOM from "react-dom/client";
import Button from "@mui/material/Button";
import { renderToStaticMarkup } from "react-dom/server";

ReactDOM.createRoot(document.querySelector("#root")).render(
  <React.StrictMode>
    <div
      dangerouslySetInnerHTML={{
        __html: renderToStaticMarkup(<Button>Test</Button>)
      }}
    />
  </React.StrictMode>
);

Codesandbox: https://codesandbox.io/s/heuristic-bouman-d1mogi?file=/index.js

All that is displayed is a normal button without material-ui's styling.

Context 🔦

I need to use renderToStaticMarkup to use material-ui components within a library that doesn't integrate natively with react.

Your environment 🌎

@emotion/react 11.10.0 @emotion/styled 11.10.0 @mui/material 5.9.3 react 18.3.0-n react-dom 18.3.0-n