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

Question

我是 React-Material 的主题功能的超级粉丝，并广泛使用它，但今天我被难住了。为了使用主题设计弹出窗口，通常我将弹出窗口（使用 display: none）存储在我的主要组件文件中，如下所示：

function App() {

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

然后我的 themeProvider 包装 <App/>:

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

但是现在我正在尝试设置不在 <App/> 和 not 内的弹出窗口的样式 DOM 加载 - 我正在从 const node = document.createElement('div') 返回一个节点。当我尝试访问 makeStyles 内的主题时，它没有使用我创建的自定义主题（假设主调色板颜色为绿色），而是使用 MUI 的默认主题（即默认主调色板颜色为紫色）。我已经尝试从我的 index 文件导出自定义 createMuiTheme 主题对象并将其直接传递给弹出组件，但它一直使用 MUI 的默认主题，即：

弹出按钮，我正在尝试访问我的自定义 MUI 主题：

import React, { FunctionComponent } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';


const useStyles = makeStyles(theme => {
  return {
    text: {
      color: 'white',
      fontSize: theme.typography.pxToRem(14),
    },
    tab: {
      backgroundColor: theme.palette.primary.light
      // This comes back as the default MUI theme :(
    }
  }
});

interface PopupButtonProps { }

export const PopupButton: FunctionComponent<PopupButtonProps> = (props) => {
  const classes = useStyles();
  return (
    <div className={ `${classes.tab} 'custom-popup__view-details pointer'`}>
      <Typography variant='button' classes={{ root: classes.text}}>
        VIEW DETAILS
      </Typography>
    </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;

有没有人知道如何在组件中使用 特定的 主题，即可能 useTheme 挂钩将特定的自定义主题放入其中一个组件？

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

Answer 1

就像您在 App 周围使用 ThemeProvider 一样，您应该在 Popup 中使用 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;

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

Apply MUI Theme to Created DOM Node

reactjs

material-ui

jss

react-material