Material UI组件在react-frame-component中丢失样式

Question

我正在尝试实现持久抽屉，在Material UI V3的演示代码中可用。链接位于https://v3.material-ui.com/demos/drawers/#persistent-drawer下方

我将它包装在react-frame-component中，因为我希望它作为一个不同的iframe。当我尝试这样做时，它呈现了演示代码，但它丢失了所有重要的UI样式。

代码如下

在PersistentDrawerLeft.jsx中(从上面给出的链接复制代码)

在MainFile.jsx中

import React from "react";
import Frame from "react-frame-component";
import PersistentDrawerLeft from "./PersistentDrawerLeft.jsx";

const MainFile = () => {
  
  return (
    <Frame>
        <PersistentDrawerLeft />
    </Frame>
    )
}

export default MainFile;

有没有人能帮帮我。

Answer 1

我刚刚在当前的项目中遇到了同样的问题，但我使用的是最新版本。我的解决方案是使用FrameContextConsumer并在回调中注入jss。这个示例还定义了一个新的材料主题，该主题与框架的父级主题不同，您可能不需要使用该主题。

这是我的沙箱的链接：https://codesandbox.io/s/react-frame-component-with-material-ui-6tqg5

一个重要的注意事项是在使用任何以Modal作为父组件的材料UI组件时(这是相当多的组件，包括Drawer的变体)。在我的示例中，我添加了一个打开Dialog的Button，并且在Dialog上包含了disablePortal属性。这将确保Dialog在框架中打开，而不是在父级中打开，在父级中，所有样式都会丢失，因为它们被注入到框架中。

import React from "react";
import { create } from "jss";
import { jssPreset } from "@material-ui/core/styles";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider, StylesProvider } from "@material-ui/core/styles";
import Frame, { FrameContextConsumer } from "react-frame-component";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#556cd6"
    },
    secondary: {
      main: "#19857b"
    },
    background: {
      default: "#dedede",
      paper: "#ffffff"
    }
  }
});

const CustomHead = props => {
  return (
    <>
      <meta charSet="utf-8" />
      <title>Previewer</title>
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <base target="_parent" />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      />
    </>
  );
};

const PreviewFrame = ({ children, ...props }) => {
  return (
    <Frame frameBorder={0} {...props} head={<CustomHead />}>
      <FrameContextConsumer>
        {({ document, window }) => {
          const jss = create({
            plugins: [...jssPreset().plugins],
            insertionPoint: document.head
          });
          return (
            <StylesProvider jss={jss}>
              <ThemeProvider theme={theme}>{children}</ThemeProvider>
            </StylesProvider>
          );
        }}
      </FrameContextConsumer>
    </Frame>
  );
};

export default PreviewFrame;

Answer 2

最后，我想出了一个解决问题的办法。

问题是，

每个iframe都有它自己的上下文。上下文具有自己的会话历史记录和文档。嵌入其他内容的浏览上下文称为父浏览上下文，它是浏览器window对象。

Material UI样式提供程序只能提供父上下文的样式。所以我们必须将样式提供者注入到iframe上下文中。

解决方案是，

材料UI本身我们有一个解决方案。DemoFrame.js实际上是将StyleProvider注入到IFrame上下文中。

请在Code Sandbox中找到工作示例。

如果有人知道其他更好的解决方案的话。请在评论部分提出建议。