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

Answer 1

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

Answer 2

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