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

Question

我正在尝试一些非常简单的方法：使用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: {
        paper: "#222222",
      }

    },
});

ReactDOM.render(
     <MuiThemeProvider theme = { themeDark }>
      <App />
     </MuiThemeProvider>, document.getElementById('root'));

我在这里迷路了，没有办法用Material-UI主题来做到这一点吗？

Answer 1

ReactDOM不会替换目标元素。我还没有亲自处理过材料ui。但是，如果将想要的背景色设置为“ currentRootColor”之类的状态，则可以在App组件的render函数中输入：

render() {
    document.body.style.backgroundColor = this.state.currentRootColor;

    ...the rest of your App render code
}

这将设置主体的背景色，如果您更改“ this.state.currentRootColor”，则您的App组件将使用新的背景色重新呈现。

但是，如果您的文档中没有标记，则需要添加一个。

Answer 2

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

Answer 3

import { createMuiTheme } from '@material-ui/core/styles';

const themeX = createMuiTheme({
   palette: {
     type: "dark",
   }
 });

就这么简单，默认情况下将托盘类型更改为深色，将其设置为浅色。这也将有助于其他组件的自定义颜色，如排版、图标等

Answer 4

我的用例，我只想从 React 组件中更改 background-color 的 body，而不是整个主题。使用了全局覆盖。

TL;DR 代码：

// other imports ...
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  '@global':{
      body:{
        backgroundColor:"#382E7E"
      }
  },
  otherstyles:{
    //  other styles ....
  },

}));


// React component, etc ...