如何在屏幕部分使用深色主题 [英] How to use dark theme for section of the screen

问题描述

我有一个实质性的UI& reactjs应用程序，并决定使用明亮的内容区域(白色bg上带有黑色文本)和深色菜单(黑色bg上带有白色文本).

I have a material UI & reactjs app and decided to use a bright content area (with black text on white bg) and a dark menu (white text on black bg).

我知道实质性UI都支持开箱即用的主题设置(浅色"和深色")，但是我不知道如何仅将它们用于屏幕的某个部分(仅菜单).

I know that material UI supports both out of the box ('light' and 'dark') theme settings, but I could not figure out how to use those just for a certain section of the screen (just the menu).

您能帮我吗?

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

(Of cause I know that I could style everything with CSS, but I wonder if there is an easier way to do this.)

推荐答案

您可以在元素层次结构中拥有任意数量的MuiThemeProvider元素.因此，您可以具有如下结构:

You can have any number of MuiThemeProvider elements that you need within your element hierarchy. So you can have a structure like the following:

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

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

The example is a modified version of the permanent drawer demo:

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

这篇关于如何在屏幕部分使用深色主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！