如何更改材质ui中的默认颜色答案

【问题标题】：How to change default colors in material ui如何更改材质ui中的默认颜色
【发布时间】：2020-06-10 12:37:08
【问题描述】：

希望更改我的应用程序的主要颜色和次要颜色。手册说这就是你所需要的，但我仍然在我的应用程序中看到基本的蓝色/红色默认颜色。我已经离开了这个参考https://material-ui.com/customization/color/

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { createMuiTheme } from "@material-ui/core";
import { MuiThemeProvider } from "material-ui/styles";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#ff8f00"
    },
    secondary: {
      main: "#ffcc80"
    }
  }
});

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

【问题讨论】：

this comment on spectrum 对您有帮助吗？我不是 MUI 专家，所以帮不上忙，但看来你现在应该使用 ThemeProvider 而不是 MuiThemeProvider。
您正在从 0.x 版本的 Material-UI 导入 MuiThemeProvider。您应该改为从“@material-ui/core/styles”导入它。
同意@George，文档指向ThemeProveder，但是来自不同的NPM包
更多详情请见stackoverflow.com/questions/56875498/…。
导入 ThemeProvider 而不是 MuiThemeProvider 有效！！感谢您的回复。我不知道我在哪里读到导入 MuiThemeProvider..

标签： reactjs material-ui

【解决方案1】：

根据文档，您似乎需要导入import { ThemeProvider } from '@material-ui/styles'; 而不是import { MuiThemeProvider } from "material-ui/styles";。

Material-UI documentation example

【讨论】：

【解决方案2】：

您可以简单地使用 @material-ui/core 中的 ThemeProvider 而不是 @material-ui/styles 中的 MuiThemeProvider

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { createMuiTheme, ThemeProvider } from "@material-ui/core";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#ff8f00"
    },
    secondary: {
      main: "#ffcc80"
    }
  }
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

【讨论】：