#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-трюков.