Want to change (pick) Primary Color dynamically in Material UI theme
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Root from './Root';
const theme1 = createMuiTheme(lightTheme);
const theme2 = createMuiTheme(darkTheme)
class App extends React.Component {
state = {
theme1: {
palette: {
type: 'light',
primary: { main: '#37b44e' },
secondary: { main: '#000' },
},
};
theme2: {
palette: {
type: 'light',
primary: { main: '#37b44e' },
secondary: { main: '#000' },
},
};
isThemeLight: true;
}
onChange = () => {
this.setState=({ isThemeLight: false })
}
onChangeTheme1 = () => {
this.setState(({theme1}) => ({
theme1: {
...theme1,
primary: { main: 'red' },
}
}));
}
render() {
const { theme1, theme2, isThemeLight } = this.state;
return (
<MuiThemeProvider
theme={isThemeLight ? createMuiTheme(theme1) : createMuiTheme(theme2)}
>
<Root /> // your app here
<button onClick={this.onChange}>Change Dark</button>
<button onClick={this.onChangeTheme1}>Change Palette Theme 1</button>
</MuiThemeProvider>
);
}
}
render(<App />, document.querySelector('#root'));