在MUI主题中动态更改原色 [英] Change primary color dynamically in MUI theme
本文介绍了在MUI主题中动态更改原色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有要求,我想给用户访问可以从列表中选择他们的原色,如蓝色,橙绿色。我已将最新的MUI用于前端。
现在我可以将浅色主题更改为深色主题,但我的要求也是更改原色。请帮助我了解如何对其进行编码。
请检查所附屏幕:
推荐答案
import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Root from './Root';
import lightTheme from 'your-light-theme-path';
import darkTheme from 'your-dark-them-path';
const theme1 = createMuiTheme(lightTheme);
const theme2 = createMuiTheme(darkTheme)
class App extends React.Component {
state = {
isThemeLight: true;
}
onChange = () => {
this.setState=({ isThemeLight: false })
}
render() {
const { isThemeLight } = this.state;
return (
<MuiThemeProvider theme={isThemeLight ? theme1 : theme2}>
<Root /> // your app here
<button onClick={this.onChange}>Change Dark</button>
</MuiThemeProvider>
);
}
}
render(<App />, document.querySelector('#app'));
其中lightTheme
或darkTheme
可以是这样的文件
export default {
direction: 'ltr',
palette: {
type: 'light',
primary: {
main: '#37b44e',
},
secondary: {
main: '#000',
},
},
};
您可以看到物料界面单据中所有可配置的主题列表Theme Configuration
方法2(针对主题更改运行时)
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('#app'));
这篇关于在MUI主题中动态更改原色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文