使用Material-UI主题更改根背景颜色

Z时代
2024-01-10
分类：问答

我正在尝试一些非常简单的方法：使用Material-UI主题为网站构建两个主题：

一个light主题和dark一个主题，但效果不佳：该主题位于每个Material-UI

react元素上，但是html文档上的root元素仍具有相同的默认白色背景。

当然，可以通过使用纯.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，那么您只会看到浏览器提供的默认设置。

这是一个工作示例：

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);