如何为屏幕部分使用深色主题

【问题标题】：How to use dark theme for section of the screen如何为屏幕部分使用深色主题
【发布时间】：2019-03-25 16:55:22
【问题描述】：

我有一个材质 UI 和 reactjs 应用程序，并决定使用明亮的内容区域（白色背景上的黑色文本）和深色菜单（黑色背景上的白色文本）。

我知道材质 UI 支持开箱即用（“浅色”和“深色”）主题设置，但我不知道如何将它们仅用于屏幕的某个部分（仅菜单）。

你能帮我解决这个问题吗？

（因为我知道我可以使用 CSS 设置所有样式，但我想知道是否有更简单的方法来做到这一点。）

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以在元素层次结构中拥有任意数量的MuiThemeProvider 元素。所以你可以有如下结构：

const mainTheme = createMuiTheme({
  palette: {
    type: "light"
  }
});

const darkTheme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

function App(props) {
  return (
    <MuiThemeProvider theme={mainTheme}>

        <MuiThemeProvider theme={darkTheme}>
          <YourMenu/>
        </MuiThemeProvider>
        <YourContent/>
    </MuiThemeProvider>
  );
}

这是一个工作示例：

https://codesandbox.io/s/61z38zjr7w

该示例是永久抽屉演示的修改版本：

https://material-ui.com/demos/drawers/#permanent-drawer

【讨论】：