将 MUI 组件渲染到字符串客户端？答案

【问题标题】：Render MUI components to string client side?将 MUI 组件渲染到字符串客户端？
【发布时间】：2022-09-30 00:59:25
【问题描述】：

我正在使用 Material UI (MUI) 库作为我的 React 应用程序的基础，并且我正在尝试将一些组件呈现为 PDF在浏览器中.

策略是：

创建一个反应元素
将 React 元素呈现为 HTML 字符串

将 HTML 字符串呈现为 PDF

我的代码目前：

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

但是，这不会正确呈现主题（字体、背景颜色等）。我相信这是步骤（2）的问题。

MUI 使用 Emotion 进行 CSS 样式设置，但 Emotion 的 SSR 包似乎只能在 Node.js 上运行。

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

如何在浏览器中将样式呈现为完整的 HTML 字符串？

一些版本：

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

标签： javascript reactjs material-ui emotion

【解决方案1】：

一种选择是手动提取样式：

function extractCSS() {
    return [...document.styleSheets]
      .map((styleSheet) => {
        try {
          return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
        } catch (e) {
          console.error(e);
        }
      })
      .filter(Boolean)
      .join("");
  }

【讨论】：