Estoy usando la biblioteca Material UI (MUI) como base para mi aplicación React y estoy tratando de convertir algunos de los componentes en PDF en el navegador .

La estrategia es:

1. Crear un elemento Reaccionar
2. Renderizar el elemento React a una cadena HTML
3. Renderizar la cadena HTML como un PDF

Mi código actualmente:

 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 });

Sin embargo, esto no representa el tema correctamente (fuentes, colores de fondo, etc.). Creo que este es un problema con el paso (2).

MUI usa Emoción para el estilo CSS, pero los paquetes SSR para Emoción solo parecen funcionar en Node.

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

¿Cómo puedo representar los estilos en una cadena HTML completa en el navegador?

Algunas versiones:

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