材质UI基于选定的主题模式使用调色板主色
在使用Mui Reaction时,我希望使用主题的主调色板中的颜色为一些使用div制作的非物质UI自定义组件上色。
我目前可以直接使用theme.palette.primary.main
或.light
颜色,包括theme.palette.text.primary
文本颜色。
但是如果我将主题更改为深色模式,我还必须更改颜色参考,方法是选中theme.mode
,条件如下:
<div
style={{
backgroundColor:
theme.palette.mode == "light"
? theme.palette.primary.dark
: theme.palette.primary.light
}}
>
Test
</div>
那么有没有一种方法可以让它像在材料UI组件中一样工作呢?传递theme.palette.primary
是否可以更改主题模式?
也许可以做一些简单的事情,比如:
<div style={{ backgroundColor: theme.palette.primary }}></div>
解决方案
您可以使用Context全局保存主题设置,还需要分隔主题,如light
和dark
。
// SettingsContext.js
import React, {
createContext,
useState
} from 'react';
const defaultSettings = {
// you could add sort of global settings here
theme: 'light'
};
const SettingsContext = createContext({
settings: defaultSettings,
saveSettings: () => {}
});
export const SettingsProvider = ({ settings, children }) => {
const [currentSettings, setCurrentSettings] = useState(settings || defaultSettings);
return (
<SettingsContext.Provider
value={{
settings: currentSettings,
}}
>
{children}
</SettingsContext.Provider>
);
};
export const SettingsConsumer = SettingsContext.Consumer;
export default SettingsContext;
您可以将设置上下文构建为挂钩,但您可以跳过此步骤。
// useSettings.js
import { useContext } from 'react';
import SettingsContext from './SettingsContext';
const useSettings = () => useContext(SettingsContext);
export default useSettings;
然后尝试创建包括深色和浅色模式的自定义主题。
// theme.js
import { createTheme as createMuiTheme } from '@mui/material/styles';
const themes = {
'light': {
...
},
'dark': {
...
}
];
export const createTheme = (name) => {
return createMuiTheme(themes[name]);
}
之后,您需要传递您在App.js
或index.js
任何顶层文件中选择的主题。
// App.js
...
import { ThemeProvider } from '@mui/material/styles';
import useSettings from './useSettings';
import { createTheme } from './theme.js';
const App = () => {
const { settings } = useSettings();
const theme = createTheme(settings.theme);
return (
<ThemeProvider theme={theme}>
...
</ThemeProvider>
);
};
export default App;
...
仅此而已。
现在您可以在组件中使用所选主题,而无需条件呈现。
<div style={{ backgroundColor: theme.palette.primary }}></div>
但这不会阻止硬刷新后选择的主题。
因此,如果您希望在刷新浏览器后仍将主题保持选中状态,则可以将主题设置保存在localStorage中。
相关文章