我正在尝试实现 Persistent drawer,在 Material UI V3 的演示代码中可用。链接在下面 https://v3.material-ui.com/demos/drawers/#persistent-drawer
我将它包装在 react-frame-component 中,因为我希望它作为一个不同的 iframe。 当我尝试这样做时,它呈现了演示代码,但它丢失了所有 Material 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;
有人可以帮我解决这个问题吗
最佳答案
我刚刚在当前项目中遇到了同样的问题,但我使用的是最新版本。我的解决方案是使用 FrameContextConsumer
并在回调中注入(inject) jss
。此示例还定义了一个新的 Material 主题,该主题与框架的父主题不同,您可能不需要它来使用。
这是我的沙箱的链接:https://codesandbox.io/s/react-frame-component-with-material-ui-6tqg5
一个重要的考虑是在使用任何具有 Modal
作为父级的 Material UI 组件时(这是相当多的组件,包括 Drawer
的变体) ).在我的例子中,我添加了一个 Button
来打开一个 Dialog
并且在 Dialog
上包含了 disablePortal
属性.这将确保 Dialog
在框架中打开,而不是在父级中打开,因为它们被注入(inject)到框架中后所有样式都丢失了。
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;
关于reactjs - Material UI 组件在 react-frame-component 中丢失样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59712312/