使用React Context与MaterialUI切换配色模式时遇Type类型错误

问题场景 #

尝试使用Material UI自定义调色板实现明暗模式切换，但ColorModeContext.Provider的value属性和ThemeProvider的theme属性出现TypeScript类型错误。

相关代码 #

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; })'.

解决方案 #

问题根源是解构数组的顺序与useMode返回的顺序不匹配：

• useMode返回的是[colorMode, theme]（第一个是上下文对象，第二个是Material UI主题）
• 但在app.tsx里错误地写成了const [theme, colorMode] = useMode();，导致类型完全错位

修正后的app.tsx代码：

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

function App() {
  // 修正解构顺序：先取colorMode，再取theme
  const [colorMode, theme] = useMode();
  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">Hello, World!</div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Pablo