如何在shadow dom中使用@mui/material 5而不丢失样式？答案

【问题标题】：How to use @mui/material 5 in shadow dom without losing styles?如何在shadow dom中使用@mui/material 5而不丢失样式？
【发布时间】：2022-10-12 21:22:10
【问题描述】：

有关于在@mui/styles 中使用 StylesProvider 的答案，但是它在 v5 中已被弃用，我们应该在 v5 中做什么？

【问题讨论】：

标签： reactjs material-ui mui5

【解决方案1】：

如果我理解正确，您的问题是您在 shadow dom 中渲染 React 应用程序，但是 MUI 生成的样式在主文档中的 shadow dom 之外？

如果是，这是我的方法：

// imports
import createCache from "@emotion/cache";

// code
// I assume you have created shadow root already 
const headElement = document.createElement("head");
const rootElement = document.createElement("div");

shadow.appendChild(headElement); // used like document.head (styles only)
shadow.appendChild(rootElement); // used like document.body (UI)

const stylesCache = createCache({
  key: "your-key", // <style data-emotion="your-key">...
  container: headElement,
});

【讨论】：