自定义MUI主题添加属性引发TS错误，求TypeScript模块扩充方案

你遇到的TypeScript错误是因为MUI的默认类型不包含你自定义的主题属性，需要通过模块扩充来扩展MUI的内置类型，让TypeScript识别这些新增字段。以下是具体实现步骤：

一、创建类型扩充文件 #

在项目中新建一个类型文件（比如src/theme/mui-types.ts，位置只要在TypeScript编译范围内即可，通常放在src目录下），写入以下代码来扩展MUI的相关接口：

import { Palette, TypeBackground, TypeText } from '@mui/material/styles';

// 扩展背景色类型，添加自定义字段
declare module '@mui/material/styles' {
  interface TypeBackground {
    main: string;
    secondary: string;
    nav: {
      main: string;
      active: string;
      inactive: string;
    };
  }

  // 扩展文本色类型，添加自定义字段
  interface TypeText {
    nav: string;
    meta: string;
  }

  // 扩展调色板类型，添加自定义icons字段
  interface Palette {
    icons: {
      active: {
        primary: string;
        secondary: string;
      };
      inactive: {
        primary: string;
        secondary: string;
      };
    };
  }
}

注意：如果你的实际需求是icons.navIcon而非icons.active，请调整上述Palette接口里的结构，和你主题定义的字段保持一致。

二、移除主题代码中的@ts-ignore #

现在TypeScript已经能识别自定义属性，你可以删掉主题代码中所有的//@ts-ignore注释，示例修改后的主题片段：

const muiTheme = createTheme({
  palette: {
    primary: { // orange
      main: '#ff5e3d',
      contrastText: '#e3e8f0'
    },
    secondary: { // black
      main: '#585858',
      contrastText: '#e3e8f0'
    },
    background: {
      main: '#FFFFFF', //white
      secondary: "#f1f5f9", //lightblue
      nav: {
        main: '#1e293b',
        active: '#0f172a',
        inactive: '#1e293b'
      }
    },
    text: {
      primary: "#11142d", 
      secondary: "#fff", 
      nav: "#64748b", 
      meta: "#94a3b8"
    },
    icons: {
      active: {
        primary: '#ff5e3d',
        secondary: '#ffffff',
      },
      inactive: {
        primary: '#94a3b8',
        secondary: '#475569',
      }
    },
    // 其余主题配置保持不变
  },
  // 其余配置保持不变
});

三、修正useTheme使用时的类型错误 #

你的isActive函数中存在字段名不一致的问题（主题里定义的是icons.active，但代码里写的是icons.navIcon.active），修正后即可移除@ts-ignore：

import { Theme } from '@mui/material/styles';

const isActive = (
  active: boolean,
  theme: Theme,
): {
  iconPrimary: string;
  iconSecondary: string;
} => {
  return active
    ? {
        iconPrimary: theme.palette.icons.active.primary,
        iconSecondary: theme.palette.icons.active.secondary,
      }
    : {
        iconPrimary: theme.palette.icons.inactive.primary,
        iconSecondary: theme.palette.icons.inactive.secondary,
      };
};

注：原函数返回的background字段未赋值，可根据实际需求补充或删除。

验证配置 #

确保你的tsconfig.json包含了这个类型文件的路径（通常"include": ["src/**/*"]即可自动识别），重新编译项目后，所有TypeScript错误应该会消失。

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