Применить тему MUI к созданному узлу DOM - PullRequest
Новая
       74

Применить тему MUI к созданному узлу DOM

1 голос
/ 23 апреля 2020

Я большой поклонник тематики React-Material и активно его использую, но сегодня я озадачен. Чтобы стилизовать всплывающие окна с темой, обычно я помещаю sh всплывающее окно (с display: none) в свой основной файл компонента следующим образом: 

function App() {

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

А затем мой themeProvider переносит <App/>: 

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

Но сейчас Я пытаюсь стилизовать всплывающее окно, которое не находится внутри <App/> и не в DOM при загрузке - я возвращаю узел от const node = document.createElement('div'). Вместо пользовательской темы, которую я создал (скажем, зеленый для основного цвета палитры), когда я пытаюсь получить доступ к теме внутри makeStyles, она использует стандартную тему MUI (ie фиолетовый для основного цвета палитры по умолчанию). Я попытался экспортировать пользовательский объект темы createMuiTheme из моего файла index и передать его непосредственно во всплывающий компонент, но он продолжает использовать стандартную тему MUI, ie:

Кнопка всплывающего окна, где я пытаюсь получить доступ к моей пользовательской теме 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;

Есть ли у кого-нибудь какие-либо идеи относительно того, как использовать Speci c тема внутри компонента, ie может быть хук useTheme для получения определенной c пользовательской темы в компонент? 

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

1 Ответ

1 голос
/ 23 апреля 2020

Так же, как вы использовали ThemeProvider вокруг App, вы должны использовать ThemeProvider в Popup: 

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;
...