Есть ли способ обновить основной и дополнительный цвет палитры тем пользовательского интерфейса материала во время выполнения?

#reactjs #material-ui #custom-theme

Вопрос:

В нашем приложении есть набор цветов палитры тем по умолчанию, однако для белой маркировки я получаю основной и дополнительный цвет темы из API. Есть ли какой-либо способ обновить эти цвета во время выполнения после получения значений из API?

Я оборачиваю MUI ThemeProvider на уровне приложения

 import { ThemeProvider, StylesProvider } from '@material-ui/styles';
 import { createMuiTheme } from '@material-ui/core';
 
 
 const App = () => {
const customTheme = createMuiTheme({
  palette: {
   primary: {
      main: "#fff0c9", 
   },
   secondary: {
      main: '#FF8200',
   }
});
 
return(
    <ThemeProvider theme={customTheme}> 
      <div> Component </div>
   </ThemeProvider>)
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

После загрузки компонента вызов API получает обновленные основной и дополнительный цвета для каждого клиента. Есть ли какой-либо способ обновить его во время выполнения?

Ответ №1:

Вы можете сохранить нужные цвета в состоянии и обновить это состояние новыми цветами. Затем вы используете это состояние createMuiTheme() для установки основного и дополнительного цветов. Вы также можете захотеть использовать React.memo() .

Вот пример настройки случайных цветов:

 const { useMemo, useState } = React;
const {
  AppBar,
  Button,
  createMuiTheme,
  CssBaseline,
  ThemeProvider,
  Toolbar
 } = MaterialUI;
 
const randomColor = () =>
  `#${Math.floor(Math.random() * 16777215).toString(16)}`;

const App = () => {
  const [primary, setPrimary] = useState(randomColor);

  const theme = useMemo(
    () =>
      createMuiTheme({
        palette: {
          primary: { main: primary }
        }
      }),
    [primary]
  );

  const setRandomPrimary = () => setPrimary(randomColor);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppBar color="primary">
        <Toolbar />
      </AppBar>
      <Toolbar />
      <Button onClick={setRandomPrimary}>Change Color</Button>
    </ThemeProvider>
  );
}

ReactDOM.render(<App />, document.body); 
 <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script> 

Это было основано на этой документации.

Функция случайного цвета появилась из CSS-трюков.