我正在尝试一些非常简单的方法:使用Material-UI主题为网站构建两个主题:
一个light主题和dark一个主题,但效果不佳:该主题位于每个Material-UI react元素上,但是html文档上的root元素仍具有相同的默认白色背景。
light
dark
当然,可以通过使用纯.css攻击身体来更改它:
body { background-color: #222; }
但是我一直想用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 }> <App /> </MuiThemeProvider>, document.getElementById('root'));
而且我在这里迷路了,有没有办法用Material-UI主题做到这一点?
CssBaseline是控制此方面的组件。如果您不使用CssBaseline,那么您只会看到浏览器提供的默认设置。
CssBaseline
这是一个工作示例:
import React from "react"; import ReactDOM from "react-dom"; import CssBaseline from "@material-ui/core/CssBaseline"; import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles"; import Button from "@material-ui/core/Button"; const themeLight = createMuiTheme({ palette: { background: { default: "#e4f0e2" } } }); const themeDark = createMuiTheme({ palette: { background: { default: "#222222" }, text: { primary: "#ffffff" } } }); const App = () => { const [light, setLight] = React.useState(true); return ( <MuiThemeProvider theme={light ? themeLight : themeDark}> <CssBaseline /> <Button onClick={() => setLight(prev => !prev)}>Toggle Theme</Button> </MuiThemeProvider> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);