Material UI: Theme Colors are not applied to App

Question

I would like to change the primary and secondary color of Material UI. However, the colors are not applied to the controls, e.g. Buttons or Fab. The default colors are still used. What do I miss here?

index.js

/* Material UI */

import { ThemeProvider, createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: { main: "#e91e63", contrastText: "#fff" },
    secondary: { main: "#03a9f4", contrastText: "#fff" }
  }
});

ReactDOM.render(
  <React.StrictMode>
    <LoadingProvider>
      <ToastContainer toastClassName="dark-toast" position="bottom-center" />
      <BrowserRouter>
        <ThemeProvider theme={theme}>
          <App />
        </ThemeProvider>
      </BrowserRouter>
    </LoadingProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Any.js

<MUI.Fab color="primary" aria-label="add" onClick={() => setShowFileAdd(true)}>
 <span className="material-icons"> add </span>
</MUI.Fab>

Answer 1

1. List item

If you use old version of Maretial-ui: Try to wrap your Root component with MuiThemeProvider in your App component

// App.js
import { createTheme, MuiThemeProvider } from '@material-ui/core/styles';
import Root from './Root';

const theme = createTheme({
  palette: {
    primary: { main: "#e91e63", contrastText: "#fff" },
    secondary: { main: "#03a9f4", contrastText: "#fff" }
  }
});

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

If you use a new version of Material-ui (MUI):

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

....

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