Reactjs 将MUI主题应用于创建的DOM节点

我是React Material主题功能的超级粉丝，并广泛使用了它，但今天我被难住了。要使用主题设置弹出窗口的样式，通常我会将弹出窗口（使用

display:none

）存储在我的主组件文件中，如下所示：

function App() {

  return (
    <Fragment>
      <Popup /> // ie here
      <LeftPanel />
      <Map />
    </Fragment>
  );
}

弹出窗口：

const Popup = (props: PopupProps) => {
  const node: HTMLElement = document.createElement('div');

  render(
    <>
      <div className="custom-popup__container">
        <PopupElement text={props.attributes.ServiceName} Icon={ProviderIcon} />
        <PopupElement text={props.attributes.Attribute_1} Icon={AddressIcon} />
        <PopupElement text={props.attributes.Attribute_2} Icon={PhoneIcon} />
      </div>
      <PopupButton />
    </>,
    node
  );
  return node;
}

export default Popup;

---

就像您在

App

周围使用

ThemeProvider

一样，您应该在

弹出窗口中使用
ThemeProvider
：

import theme from "./whereever_you_define_your_theme_using_createMuiTheme";

const Popup = (props: PopupProps) => {
  const node: HTMLElement = document.createElement('div');

  render(
    <ThemeProvider theme={theme}>
      <div className="custom-popup__container">
        <PopupElement text={props.attributes.ServiceName} Icon={ProviderIcon} />
        <PopupElement text={props.attributes.Attribute_1} Icon={AddressIcon} />
        <PopupElement text={props.attributes.Attribute_2} Icon={PhoneIcon} />
      </div>
      <PopupButton />
    </ThemeProvider>,
    node
  );
  return node;
}

export default Popup;

import theme from.“/where\u you\u定义\u your\u theme\u使用\u createMuiTheme”；
常量弹出=（道具：弹出=>{
const节点：HTMLElement=document.createElement（'div'）；
渲染(
,
节点
);
返回节点；
}
导出默认弹出窗口；
谢谢你，瑞安！！我曾尝试在
中包装按钮，但没有成功，所以我以前甚至没有费心包装整个弹出窗口-它工作了！
const Popup = (props: PopupProps) => {
  const node: HTMLElement = document.createElement('div');

  render(
    <>
      <div className="custom-popup__container">
        <PopupElement text={props.attributes.ServiceName} Icon={ProviderIcon} />
        <PopupElement text={props.attributes.Attribute_1} Icon={AddressIcon} />
        <PopupElement text={props.attributes.Attribute_2} Icon={PhoneIcon} />
      </div>
      <PopupButton />
    </>,
    node
  );
  return node;
}

export default Popup;

Versions:
React: 16.13.1
MUI: 4.9.9 (I'll try upgrading to 4.9.11 in the meantime)

import theme from "./whereever_you_define_your_theme_using_createMuiTheme";

const Popup = (props: PopupProps) => {
  const node: HTMLElement = document.createElement('div');

  render(
    <ThemeProvider theme={theme}>
      <div className="custom-popup__container">
        <PopupElement text={props.attributes.ServiceName} Icon={ProviderIcon} />
        <PopupElement text={props.attributes.Attribute_1} Icon={AddressIcon} />
        <PopupElement text={props.attributes.Attribute_2} Icon={PhoneIcon} />
      </div>
      <PopupButton />
    </ThemeProvider>,
    node
  );
  return node;
}

export default Popup;