Question

我想使用MaterialUI在React中的两个主题之间切换

我正在使用materialui / core中的MUIthemeprovider。但是不知何故，我无法在两个主题之间切换。

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

我尝试使用https://material-ui.com/styles/advanced/中的themeprovider。但是它没有使用materialui默认主题格式。所以我无法访问theme.palette.primary，theme.overrides等...

现在，我已经创建了一个themeprovider并将其导航栏/页面内容/路线包装在其中。我在大多数组件中使用useContext来读取“切换状态”，然后使用类/内联样式更改“ bg＆文本颜色”。

这变得越来越乏味且效率低下。有更聪明的方法吗？

       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次。嗯...我很高兴有更好的方法吗？请指教！

动态地在MATERIALUI中的两个主题之间切换

0 个答案: