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>
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>
);
}
The issue was kinda weird. I had to replace the import to:
import { createTheme, ThemeProvider } from '@mui/material/styles';