Change primary and secondary colors in MUI

reactjs material-ui material-design themes

55,317

Solution 1

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?

Solution 2

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

Solution 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.

Solution 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

View more solutions

55,317

Author by

Den Gas

Updated on November 04, 2021

Comments

Den Gas over 2 years
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 [email protected]. I updated this package to v20 and there is still no such folder anyway.