我正在尝试一些非常简单的事情:使用 Material-UI 主题为网站构建两个主题:
一个light主题和dark一个,但效果不佳:主题位于每个 Material-UI react 元素上,但 html 文档上的根元素保持相同的默认白色背景。
当然可以通过纯.css攻击body来改变:
body {
background-color: #222;
}
Run Code Online (Sandbox Code Playgroud)
但是我想用 React 动态改变它,我虽然这会起作用,但它不会:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@material-ui/styles';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
const themeLight = createMuiTheme({
palette: {
background: {
default: "#e4f0e2"
}
},
});
const themeDark = createMuiTheme({
palette: {
background: {
default: "#222222",
}
},
});
ReactDOM.render(
<MuiThemeProvider theme = { themeDark }> …Run Code Online (Sandbox Code Playgroud)