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.
Make a class that specifies the colour you want and provide the hex colour code as the background colour. (also not ideal). Make a JSX class using makeStyles that takes the app's theme as an argument and provide the primary. light colour directly from your theme.
primary - used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components. secondary - used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product.
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'));
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'));
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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With