Material-UI - 如何获取由 JSS 生成的 CSS 类内容？不仅是静态 CSS，还有动态类

问题描述

我在 React 项目中使用 Material UI，我知道它在幕后使用 JSS。根据服务器渲染应用程序中的 Material UI 文档，我们可以使用以下代码获取 CSS 字符串，

https://material-ui.com/styles/api/#serverstylesheets

我正在尝试在我的浏览器应用程序中使用相同的内容 [仅客户端没有服务器渲染]。我有一个要求，我需要将 Material UI 生成的整个 CSS 作为字符串，以便使用 Puppeteer 将其转换为 PDF。我正在努力从 MUI 中获取 CSS。我能够获取页面渲染时添加的所有 CSS 类，但是，如果我们动态更改 Material UI 样式，它会通过 JSS 获得一个随机名称，例如：.MuiTableCell-root-54 我不知道这个类在哪里 [不在 DOM 上作为标签。不适用于渲染后的动态类名]。有什么办法可以使用 JSS API 或 Material UI API 获取这样一个动态类的内容吗？

解决方法

终于！！！我在不使用任何来自 JSS 或 Material UI 的情况下得到了我想要的东西。我使用以下代码将所有 CSS 应用于 HTML 页面，

function extractCSS(node) {
  const allCSS = [...document.styleSheets]
    .map((styleSheet) => {
      try {
        return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
      } catch (e) {
        console.log(
          "Access to stylesheet %s is denied. Ignoring...",styleSheet.href
        );
      }
    })
    .filter(Boolean)
    .join("");

  return allCSS;
}

export { extractCSS };

node 是我传递的 HTML 元素。我没有优化代码以仅获取节点下的那些 CSS。但这有效。不过我会有一些不需要的 CSS ！！感谢 MDN。参考：https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList