Material UI主题-交换主色和次色

Question

我对React JS的素材UI主题非常陌生。我有一个案例，我需要根据我在下拉列表中选择的类型更改主题颜色(主色和辅色)。从字面上看，如果我们看到Material UI website color options。如果我们同时选择原色和次色，整个网站都会以同样的方式改变，我的应用程序的颜色也需要改变。在我的例子中，我的颜色被硬编码到index.js文件中。我还使用redux并存储基于该值的dropdown值，以更改/交换原色和次色。

这是我正在使用的代码。有没有人能帮我换一下颜色？

​

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'));

​

Answer 1

Material UI提供了一个主题提供程序组件，可以在应用程序的根目录下使用。更改您传递给主题提供者的主题对象将在整个应用程序中传播更改。这是Material UI网站用于在深色和浅色模式之间切换的方法。

可以在以下位置找到ThemeProvider的文档：

https://material-ui.com/styles/api/#themeprovider

Answer 2

您应该从存储中检索这些值，而不是对它们进行硬编码。您可以创建一个接受颜色参数的函数，并使用它创建主题对象。然后，您可以更新存储中的值，并使用它重新创建主题。

可能有许多不同的方法可以做到这一点，但我写了一个小示例来向您展示如何做到这一点。从您的示例中看，您使用的是较旧版本的@material-ui/core，但其思想保持不变。将大量代码分离到单独的文件中也更好，但对于本例，我只是将所有内容都放在一个文件中。

import React, { useMemo, useState } from "react";
import ReactDOM from "react-dom";
import { Provider, connect } from "react-redux";
import { createStore, combineReducers } from "redux";
import CssBaseline from "@material-ui/core/CssBaseline";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { Typography, Button, TextField } from "@material-ui/core";

const initialState = {
  primaryColor: "#FF0000",
  secondaryColor: "#00FF00"
};

const SET_COLORS = "set_colors";

const uiReducer = function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case SET_COLORS:
      return {
        ...state,
        primaryColor: action.primaryColor,
        secondaryColor: action.secondaryColor
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  uiReducer
});

const store = createStore(rootReducer);

const createTheme = colors => {
  return createMuiTheme({
    palette: {
      primary: {
        main: colors.primaryColor
      },
      secondary: {
        main: colors.secondaryColor
      }
    }
  });
};

const mapStateToProps = state => ({
  colors: state.uiReducer
});

const setColors = (primaryColor, secondaryColor) => ({
  type: SET_COLORS,
  primaryColor,
  secondaryColor
});

const mapDispatchToProps = {
  setColors
};

const MaterialApp = connect(
  mapStateToProps,
  mapDispatchToProps
)(({ colors, setColors }) => {
  const theme = useMemo(() => createTheme(colors), [colors]);

  const [color1, setColor1] = useState('#FF0000');
  const [color2, setColor2] = useState('#00FF00');

  const saveColors = () => {
    setColors(color1, color2);
  };

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App">
        <Typography color="primary">PRIMARY COLOR</Typography>
        <Typography color="secondary">SEONDARY COLOR</Typography>
        <hr />
        <Button color="primary" variant="contained">
          PRIMARY COLOR
        </Button>
        <Button color="secondary" variant="contained">
          SECONDARY COLOR
        </Button>
        <hr />
        <TextField
          value={color1}
          onChange={event => setColor1(event.target.value)}
        />
        <TextField
          value={color2}
          onChange={event => setColor2(event.target.value)}
        />
        <Button onClick={saveColors} variant="outlined">
          Set colors
        </Button>
      </div>
    </ThemeProvider>
  );
});

function App() {
  return (
    <Provider store={store}>
      <MaterialApp />
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Or view it on Codesandbox.