使用 React Context 和 MaterialUI 时切换颜色模式答案

【问题标题】：Toggling colour mode when using React Context and MaterialUI使用 React Context 和 MaterialUI 时切换颜色模式
【发布时间】：2022-11-27 12:19:11
【问题描述】：

我正在尝试使用带有 MaterialUI 的自定义调色板在暗模式和亮模式之间切换，但是我在上下文提供程序和主题提供程序的值和主题道具上分别遇到了一些类型错误。

// theme.ts
export const ColorModeContext = React.createContext({
  toggleColorMode: () => {},
});

export const useMode = () => {
  const [mode, setMode] = React.useState<'light' | 'dark'>('light');

  const colorMode = React.useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode: PaletteMode) =>
          prevMode === 'light' ? 'dark' : 'light'
        );
      },
    }),
    []
  );

  const theme = React.useMemo(() => createTheme(themeSettings(mode)), [mode]);
  return [colorMode, theme];
};

// app.tsx
import { CssBaseline, ThemeProvider } from '@mui/material';
import { useMode, ColorModeContext } from './assets/theme/theme';

function App() {
  const [theme, colorMode] = useMode();
  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">Hello, World!</div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

export default App;

我从这段代码中得到以下错误：

Type '{ toggleColorMode: () => void; } | Theme' is not assignable to type '{ toggleColorMode: () => void; }'.
  Property 'toggleColorMode' is missing in type 'Theme' but required in type '{ toggleColorMode: () => void; }'.

Type '{ toggleColorMode: () => void; } | Theme' is not assignable to type 'Partial<{ toggleColorMode: () => void; }> | ((outerTheme: { toggleColorMode: () => void; }) => { toggleColorMode: () => void; })'.
  Type 'Theme' is not assignable to type 'Partial<{ toggleColorMode: () => void; }> | ((outerTheme: { toggleColorMode: () => void; }) => { toggleColorMode: () => void; })'.

我已经浏览了这个和谷歌上的 Material UI 文档，但似乎无法解决这个问题。

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

首先，您可以看到您的useMode 类型，它看起来像。

(alias) useMode(): ({
    toggleColorMode: () => void;
} | Theme)[]

下面是一个简单的例子。

const app = [1, 2, 'hello'] // type: const app: (string | number)[]

Typescript 无法断言数组中的值类型。所以你应该让打字稿知道。

在这种情况下，您可以使用const assertions。

const app = [1, 2, 'hello'] as const // type: const app: readonly [1, 2, "hello"]


export const useMode = () => {
  const [mode, setMode] = React.useState<'light' | 'dark'>('light');

  const colorMode = React.useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode: PaletteMode) =>
          prevMode === 'light' ? 'dark' : 'light'
        );
      },
    }),
    []
  );

  const theme = React.useMemo(() => createTheme(themeSettings(mode)), [mode]);
  return [colorMode, theme] as const; // this should solve your problem.
};

【讨论】：