Компонент пользовательского интерфейса материала теряет стили внутри компонента frame-frame

Question

Я пытаюсь реализовать постоянный ящик, доступный в демонстрационном коде в Material UI V3. Ссылка ниже https://v3.material-ui.com/demos/drawers/#persistent -втюра

Я обертываю его внутри компонентом frame-frame, так как я хочу использовать его как другой iframe. Когда я пытаюсь это сделать, он рендерит демонстрационный код, но теряет все стили пользовательского интерфейса.

Код такой, как показано ниже

В 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 в качестве родительского элемента (а это довольно много компонентов, включая вариант Drawer). В моем примере я добавил Button, который открывает Dialog, а в 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.

Поставщик стилей пользовательского интерфейса для материалов может предоставлять стили только для родительского контекста. Таким образом, мы должны внедрить поставщик стилей в контекст iframe.

Решение состоит в том,

Сам пользовательский интерфейс Material, у нас есть решение для него. DemoFrame. js фактически внедряет StyleProvider в контекст IFrame.

Рабочий пример можно найти в Code Sandbox .

Если кто-нибудь знает другое лучшее решение. Пожалуйста, предложите в разделе комментариев.