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

Question

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

一个light主题和dark一个，但效果不佳：主题位于每个 Material-UI 反应元素上，但 html 文档上的根元素保持相同的默认白色背景。

当然可以通过纯.css攻击body来改变：

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 主题制作这个吗？

标签： reactjsmaterial-ui

Answer 1

CssBaseline是控制这个方面的组件。如果您不使用CssBaseline，那么您只会看到浏览器提供的默认值。

这是一个有效的 v4 示例（下方的 v5 示例）：

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

---

下面是一个 Material-UI v5 示例。与 v4 的唯一区别是名称更改ThemeProvider（尽管此名称在 v4 中也可用MuiThemeProvider）和createTheme（而不是createMuiTheme）并使用新的@mui/material包名称而不是@material-ui/core.

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";

const themeLight = createTheme({
  palette: {
    background: {
      default: "#e4f0e2"
    }
  }
});

const themeDark = createTheme({
  palette: {
    background: {
      default: "#222222"
    },
    text: {
      primary: "#ffffff"
    }
  }
});

const App = () => {
  const [light, setLight] = React.useState(true);
  return (
    <ThemeProvider theme={light ? themeLight : themeDark}>
      <CssBaseline />
      <Button onClick={() => setLight((prev) => !prev)}>Toggle Theme</Button>
    </ThemeProvider>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);