Material ui 根据所选主题模式使用调色板原色

在使用 mui React 时，我想使用主题主调色板中的颜色为使用 div 制作的一些非材质 ui 自定义组件着色。

我目前可以使用theme.palette.primary.main or the .light直接颜色，包括theme.palette.text.primary对于文本颜色。

But如果我将主题更改为深色模式，我还必须通过检查来更改颜色参考theme.mode条件如下：

  <div
    style={{
      backgroundColor:
        theme.palette.mode == "light"
          ? theme.palette.primary.dark
          : theme.palette.primary.light
    }}
  >
    Test
  </div>

那么有没有一种方法可以让我们像在 Material ui 组件中一样工作呢？通过theme.palette.primary可以与主题模式更改一起使用吗？

也许更简单一些，比如：

<div style={{ backgroundColor: theme.palette.primary }}></div>

你可以使用Context https://reactjs.org/docs/context.html要全局保存您的主题设置，您还需要将主题分开，例如light and 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 or 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>

但这不会阻止硬刷新后选定的主题。

因此，如果您想在刷新浏览器后仍保持选定的主题，那么您可以将主题设置保存在本地存储 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.