reactjs - 在 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',
},
},
};
您可以在 Material UI Docs 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'));