How to change default colors in material ui

Question

Looking to change the primary and secondary colors of my application. The manual says this is all you need but I am still seeing the basic blue/red default colors in my app. I've been going off this reference 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")
);

Does this comment on spectrum help you? I'm no MUI expert, so can't help too much, but it seems you should be using ThemeProvider now and not MuiThemeProvider. — George
You are importing MuiThemeProvider from the 0.x version of Material-UI. You should import it from "@material-ui/core/styles" instead. — Ryan Cogswell
Agree with @George, the documentation points to ThemeProveder, however from different NPM package — Nikolai Kiselev
See stackoverflow.com/questions/56875498/… for more details. — Ryan Cogswell
importing ThemeProvider instead of MuiThemeProvider worked!! Thanks for the responses. I don't know where I read to import MuiThemeProvider.. — farmwell

Gabriel Santos Gabriel Santos · Accepted Answer · 2020-02-26T15:58:28

You can simply use the ThemeProvider from the @material-ui/core instead of MuiThemeProvider from @material-ui/styles

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

How to change default colors in material ui

2 Answers