reactjs - Material UI 组件在 react-frame-component 中丢失了样式
问题描述
我正在尝试实现持久抽屉,可在 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
并注入jss
回调内部。此示例还定义了一个与框架父级主题不同的新材质主题,您可能不需要使用它。
这是我的沙箱的链接:https ://codesandbox.io/s/react-frame-component-with-material-ui-6tqg5
一个重要的考虑因素是在使用任何以 aModal
作为父级的 Material UI 组件时(这是相当多的组件,包括 a 的变体Drawer
)。在我的示例中,我添加了一个Button
打开 aDialog
并包含Dialog
该disablePortal
属性的 a。这将确保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;
推荐阅读
- vb.net - 在VB中从DLL调用Exe文件
- html - 不同浏览器的圆形字体真棒图标放置问题
- javascript - 根据数组中的年份创建分组数组
- r - R中是否有一种简单的方法可以访问向量中负元素的位置?
- c# - 如何在 Xamarin Forms 中使用 Prism MVVM 和 ContentView?
- android - 如何使用 URL 创建字符串
- python - numpy.concatencate 两个相同大小的行向量到矩阵
- python - 从熊猫数据框列中的字典列表中获取第一个值
- sql - 替换查询sql postgresql中的AZ和0-9
- google-apps-script - FormSubmit = e.range的已安装触发器无法调用未定义的GetRowIndex方法?