材质UI主题-交换原色和辅助色

Question

我对React JS的Material UI主题非常陌生。在某些情况下，我需要根据在下拉菜单中选择的类型来更改主题颜色（“主色”和“辅助色”）。从字面上看，我们是否看到实质性用户界面website color options。如果我们同时选择原色和副色，则整个网站的更改方式也与我的应用程序颜色也需要更改的方式相同。就我而言，我的颜色被硬编码在index.js文件中。我还使用redux并基于该值存储下拉值，因此我需要更改/交换原色和副色。

这是我正在使用的代码。任何人都可以请大家交流一下颜色吗？？

import LoginPage from './LoginPage.js';
import * as serviceWorker from './serviceWorker';
import store from './store';

const theme = createMuiTheme({
	"palette": {
		"common": {
			"black": "#000",
			"white": "#fff"
		},
		"background": {
			"paper": "#fff",
			"default": "#f7f7f7"
		},
		"primary": {
			"light": "rgba(76, 137, 185, 1)",
			"main": "rgba(0, 87, 155, 1)",
			"dark": "rgba(0, 60, 108, 1)",
			"contrastText": "#fff"
		},
		"secondary": {
			"light": "rgba(116, 192, 231, 1)",
			"main": "rgba(220, 23, 108, 1)",
			// "dark": "rgba(39, 116, 155, 1)",
			"dark": "rgba(200, 23, 108, 1)",
			"contrastText": "#fff"
		},
		"error": {
			"light": "#e57373",
			"main": "#f44336",
			"dark": "#d32f2f",
			"contrastText": "#fff"
		},
		"text": {
			"primary": "rgba(0, 0, 0, 0.87)",
			"secondary": "rgba(0, 0, 0, 0.54)",
			"disabled": "rgba(0, 0, 0, 0.38)",
			"hint": "rgba(0, 0, 0, 0.38)"
		},
	},
	"typography": {
		"useNextVariants": true,
		"fontFamily": "Hind",
	},
	overrides: {
		MUIDataTable: {
			responsiveScroll: {
				maxHeight: '980px'
			}
		},
		'Mui-selected': {
			'background-color': 'red'
		}
	}
});

ReactDOM.render(
	<Provider store={store}>
		<MuiThemeProvider theme={theme}>
			<CssBaseline />
			<BrowserRouter basename="/">
				<Switch>
					<Route exact path='/' component={LoginPage} />
					<Route exact path='/signup' component={SignupPage} />
				</Switch>
			</BrowserRouter>
		</MuiThemeProvider>
	</Provider>
	, document.getElementById('root'));