MUI v5为TypeScript React应用配置主题出现类型错误如何解决？

问题原因 #

该报错是因为你没有正确从MUI包中导入ThemeOptions类型，你声明的themeOptions变量绑定的是未知的全局/本地ThemeOptions类型，导致属性校验不匹配。

解决步骤 #

• 第一步：补全ThemeOptions的导入声明，修改导入行如下：

import { styled, createTheme, ThemeProvider, ThemeOptions } from '@mui/material/styles';

• 可选优化方案：你也可以直接删除themeOptions的显式类型声明，createTheme方法本身自带类型推导，无需手动标注即可完成类型校验，修改后代码如下：

import { styled, createTheme, ThemeProvider } from '@mui/material/styles';

// 无需显式标注ThemeOptions类型，createTheme会自动推导校验
const themeOptions = {
 palette: {
  primary: {
    main: '#5d4037',
    light: '#8b6b61',
    dark: '#321911',
    contrastText: '#ffffff',
  },
  secondary: {
    main: '#c2185b',
    light: '#fa5788',
    dark: '#8c0032',
  },
  background: {
    default: '#c4c9c9',
  },
 }
};

const mdTheme = createTheme(themeOptions);

• 若上述操作后仍存在报错，确认所有@mui相关依赖包的版本一致，升级到最新稳定版即可解决版本不兼容导致的类型冲突。

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