Переключаться между двумя темами в MATERIALUI динамически - PullRequest
Новая
       24

Переключаться между двумя темами в MATERIALUI динамически

0 голосов
/ 29 мая 2019

Я бы хотел переключаться между двумя темами в React, используя MaterialUI

Я использую MUIthemeprovider из materialui / core. Но почему-то я не могу переключаться между двумя темами. 

  <MuiThemeProvider theme={currentTheme}>
    <MuiThemeProvider theme={currentTheme1}>
      <DarkModeProvider>
      <CssBaseline />
        <LocationProvider >
        <NavBar />
          <PageContent>
            <Routes/> 
          </PageContent>
        </LocationProvider>
      </DarkModeProvider>
    </MuiThemeProvider>
  </MuiThemeProvider>

Я пытался использовать themeprovider из https://material -ui.com / styles / advanced / . Но он не использует формат темы по умолчанию Materialui. Поэтому я не могу получить доступ к theme.palette.primary, theme.overrides и т. Д ...

Прямо сейчас я создал поставщик тем и обернул в него мой navbar / pagecontent / route. Я использую useContext в большинстве компонентов, чтобы прочитать 'toggledstate', а затем изменить 'bg & text color', используя классы / встроенные стили.

Это становится все более утомительным и неэффективным. Есть ли более умный способ сделать это? 

       const { isDarkMode, toggleTheme } = useContext(ThemeContext);              

       <MenuItem style={isDarkMode ? {backgroundColor: '#1565c0'} :  
            {backgroundColor: '#343a40'}} 
            className={classes.menuItemDisplay} onClick= 
            {handleClose}>Profile</MenuItem>
        <MenuItem style={isDarkMode ? {backgroundColor: '#1565c0'} :  
            {backgroundColor: '#343a40'}} 
        <Paper style={isDarkMode ? {backgroundColor: 
         '#1565c0',height:'100vh'} :  {backgroundColor: 
         '#343a40',height:'100vh'}}>

Как видите, если у меня есть 100 компонентов, мне нужно менять цвета. Я должен сделать это 100 раз. Хм-м-м ... У меня есть способ получше? Пожалуйста, сообщите!

...