How to change the primary and secondary colors in React MUI?

To change the primary and secondary colors in React MUI, we call createTheme to create a theme with the primary and secondary colors.

For instance, we write

import React from "react";
import { render } from "react-dom";
import { MuiThemeProvider, createTheme } from "@material-ui/core/styles";
import Root from "./Root";

const theme = createTheme({
  palette: {
    secondary: {
      main: "#E33E7F",
    },
  },
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}

render(<App />, document.querySelector("#app"));

to call createTheme with an object with the palette property with the colors.

Then we wrap our app with MuiThemeProvider with the theme prop set to theme to apply the theme colors.