我有一个材质 UI 和 reactjs 应用程序，并决定使用明亮的内容区域（白色背景上的黑色文本）和黑色菜单（黑色背景上的白色文本）。
我知道 Material UI 支持开箱即用的（“亮”和“暗”）主题设置，但我不知道如何仅对屏幕的某个部分（仅菜单）使用这些设置。
你能帮我解决这个问题吗？
（当然，我知道我可以使用 CSS 设置所有样式，但我想知道是否有更简单的方法来做到这一点。）
如何在屏幕部分使用深色主题
IT技术
reactjs
material-ui
2021-05-26 16:36:47
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
该示例是永久抽屉演示的修改版本：