材质 UI 组件正在失去反应帧组件中的样式

Question

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

我把它包装在反应框架组件中，因为我希望它作为一个不同的 iframe。 当我尝试这样做时，它会呈现演示代码，但它会丢失所有材质 UI 样式。

代码如下

In PersistentDrawerLeft.jsx (代码是从上面给出的链接复制的(

在主文件.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，并在包含disablePortal属性的Dialog。这将确保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对象。

材质 UI 样式提供程序只能为父上下文提供样式。因此，我们必须将样式提供程序注入 iframe 上下文。

解决方案是，

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

请在代码沙箱中找到工作示例。

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