I am using the Material UI (MUI) library as a basis for my React app and I am trying to render some of the components to PDF in the browser.

The strategy is:

1. Create a React element
2. Render the React element to an HTML string
3. Render the HTML string as a PDF

My code currently:

import React from "react";
import ReactDOMServer from 'react-dom/server';
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { jsPDF } from "jspdf";

// ...

const el = (
  <ThemeProvider theme={myTheme}>
    <CssBaseline />
    <App />
  </ThemeProvider>
);

const html = ReactDOMServer.renderToString(el);

const doc = new jsPDF({
  orientation: "portrait",
  unit: "px",
});

const callback = () => {
  doc.save("test.pdf");
};

doc.html(html, { callback });

However, this does not render the theme correctly (fonts, background colors, etc). I believe this is an issue with step (2).

MUI uses Emotion for CSS styling, but the SSR packages for Emotion only seem to work on Node.

import { renderStylesToString } from '@emotion/server';

How can I render the styles into a complete HTML string in the browser?

Some versions:

"react": "^17.0.2",
"@mui/material": "^5.0.0",
"@emotion/css": "^11.7.1",