如何解决有没有办法在运行时更新 Material UI 主题调色板的主色和辅助色?
我们的应用程序中有一组默认的主题调色板颜色,但是出于白色标签的目的,我从 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 调用会为每个客户端接收更新的主色和辅助色。有没有办法在运行时更新它?
解决方法
您可以将所需的颜色存储在状态中并使用新颜色更新该状态。然后,您在 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>
这是基于此documentation。
随机颜色函数来自CSS-Tricks。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。