Material-UI

Question

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

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

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

获取这样一个动态 class 的内容

Answer 1

终于！！！我没有使用 JSS 或 Material UI 中的任何东西就得到了我想要的东西。我使用下面的代码在 HTML 页面上应用了所有 CSS，

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

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

Material-UI - how to get CSS class content generated by JSS? Not just the static CSS, But dynamic classes as well

reactjs

jss

css-in-js