Change primary and secondary colors in MUI - reactjs

Question

I have a react app using MUI. When you import a button, you can set its style using primary={true} or secondary={true}. I want to change the primary and secondary colors. I found out that I can do that this way:
const theme = createMuiTheme({
palette: {
primary: '#00bcd4',
secondary: '#ff4081'
}
});
and then here I can use it:
<MuiThemeProvider theme={theme}>
<App/>
</MuiThemeProvider>
But I got an error: createMuiTheme is not a function...
I went into the MUI package and found out that there is not such file and when I import createMuiTheme, I get undefined. It's supposed to be imported from material-ui/styles/theme but it actually doesn't have this folder at all!
I was using material-ui#0.19.4. I updated this package to v20 and there is still no such folder anyway.

Answer 1

New Answer
With the latest version of Material UI, createMuiTheme is deprecated now. Hence, instead of that we should use createTheme
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createTheme } from '#material-ui/core/styles';
import Root from './Root';
// use default theme
// const theme = createTheme();
// Or Create your Own theme:
const theme = createTheme({
palette: {
secondary: {
main: '#E33E7F'
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<Root />
</MuiThemeProvider>
);
}
render(<App />, document.querySelector('#app'));
Old answer
From https://material-ui.com/customization/themes/:
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import Root from './Root';
// use default theme
// const theme = createMuiTheme();
// Or Create your Own theme:
const theme = createMuiTheme({
palette: {
secondary: {
main: '#E33E7F'
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<Root />
</MuiThemeProvider>
);
}
render(<App />, document.querySelector('#app'));

Answer 2

The two diferrences with the documentation i noticed is the name of the prop for the MuiThemeProvider:
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar title="My AppBar" />
</MuiThemeProvider>
And the function is not createMuiTheme but getMuiTheme:
import getMuiTheme from 'material-ui/styles/getMuiTheme';
Update:
If you open the light theme from the package, they are not using primary or secondary, maybe you should try like that?

Answer 3

You should be using v1-beta as the docs recommend. I had these issues myself and realised that I was using an outdated version of MUI.
npm install material-ui#next
Import:
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
Create your theme:
const theme = createMuiTheme({
palette: {
secondary: {
main: '#d32f2f'
}
},
});
Apply it to your button:
<MuiThemeProvider theme={theme}>
<Button
onClick={this.someMethod}
variant="raised"
color="secondary"
</Button>
</MuiThemeProvider>
Usually if you get any import issues regarding MUI, then it's almost every time some version problem.

Answer 4

If you want to use a custom color, put it in the main property of an object. MUI will use that color to calculate the dark, light and contrastText values besides the main one.
dark, light: a darker and lighter versions of the main color.
contrastText: the color of the text if the background color is the main color.
The example below:
const theme = createTheme({
palette: {
primary: {
main: '#ff0000', // very red
},
secondary: {
main: '#00fff0', // very cyan
},
},
});
Generates the following color properties in the primary and secondary object:
const theme = useTheme();
const { main, dark, light, contrastText } = theme.palette.primary;
// same with secondary
// const { main, dark, light, contrastText } = theme.palette.secondary;
You can also use MUI colors by passing the color object directly to primary or secondary property. This time, MUI uses the property 500 (for example amber[500]) to calculate 3 other colors. The code below:
import { amber, deepPurple } from '#mui/material/colors';
const theme = createTheme({
palette: {
primary: amber,
secondary: deepPurple,
},
});
Generates the following color properties in the primary and secondary object, Note that because you pass the whole color, all other shades from 50 to A700 are also available as a small side-effect:
Live Demo
Related Answers
How to add custom MUI palette colors
Material-UI: how to access all palette shades inside component

Answer 5

The new API for MUI Material v5 is described in https://mui.com/material-ui/customization/theming/.
import * as React from 'react';
import { red } from '#mui/material/colors';
import { ThemeProvider, createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: red[500],
},
},
});
const App = () =>
<ThemeProvider theme={theme}>...</ThemeProvider>;