Question

我有一个实质性的UI和reactjs应用程序，因此决定使用明亮的内容区域（白底黑字的黑色文本）和深色菜单（黑底白字的白色文本）。

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

您能帮我吗？

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

Answer 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

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

1 个答案: