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](https://spectrum.chat/material-ui/help/muithemeprovider-vs-themeprovider~f6fa2e2b-26d1-45cd-a134-5be0d50ea865?m=MTU1MDc2NTQwMTM4MA==) 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, Feb 26 '20 at 15:36
You are importing MuiThemeProvider from the 0.x version of Material-UI. You should import it from "@material-ui/core/styles" instead. — Ryan Cogswell, Feb 26 '20 at 15:43
Agree with @George, the documentation points to `ThemeProveder`, however from different NPM package — Nikolai Kiselev, Feb 26 '20 at 15:43
See https://stackoverflow.com/questions/56875498/difference-between-material-ui-vs-material-ui-without-at-sign/56875978#56875978 for more details. — Ryan Cogswell, Feb 26 '20 at 15:44
importing ThemeProvider instead of MuiThemeProvider worked!! Thanks for the responses. I don't know where I read to import MuiThemeProvider.. — farmwell, Feb 27 '20 at 14:04

score 5 · Accepted Answer · answered Feb 26 '20 at 15:58

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

score 2 · Answer 2 · answered Feb 26 '20 at 15:42

2

It seems you need to import import { ThemeProvider } from '@material-ui/styles'; instead of import { MuiThemeProvider } from "material-ui/styles"; according to the documentation.

Material-UI documentation example

answered Feb 26 '20 at 15:42

Nikolai Kiselev

6,201
2
27
37

score 1 · Answer 3 · answered May 19 '22 at 07:20

`createMuiTheme` is deprecated in newer versions. I used below code to make it work!

import { createTheme, ThemeProvider } from '@mui/material';

const theme = createTheme({
  palette: {
    primary: {
      main: "#3399ff"
    },
    secondary: {
      main: "#000000"
    }
  }
});


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

score 0 · Answer 4 · answered Aug 12 '23 at 07:46

As per new updates, you can view the docs at https://mui.com/material-ui/customization/theming/, and follow easily as follows. Now it will work as the MUI has been updated:

import * as React from 'react';
import { blueGrey } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: blueGrey[500],
    },
  },
});

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

How to change default colors in material ui

4 Answers4