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

Posted 2023-02-22

【中文标题】将 MUI 主题应用于创建的 DOM 节点

【英文标题】：Apply MUI Theme to Created DOM Node

【发布时间】：2020-08-07 02:09:33

【问题描述】：

我是 React-Material 主题功能的忠实拥护者，并且已广泛使用它，但今天我被难住了。要使用主题设置弹出窗口的样式，通常我将弹出窗口（使用display: none）隐藏在我的主组件文件中，如下所示：

function App() 

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

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

<ThemeProvider theme=theme>
  <App />
</ThemeProvider>

但是现在我正在尝试设置不在<App/> 内的弹出窗口的样式，并且 not 在加载时在 DOM 上 - 我正在从 @ 返回一个节点987654326@。当我尝试访问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)

【参考方案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;

【讨论】：

谢谢瑞恩！！我曾尝试将按钮包装在<ThemeProvider> 中，但这不起作用，所以我什至没有费心包装整个弹出窗口 - 它有效！ ?