如何用TypeScript扩展MUI 5主题？模块增强报错解决

1. 保证theme.d.ts的模块增强语法准确 #

你的src/theme.d.ts需要正确扩展MUI的类型模块，示例代码如下：

import '@mui/material/styles';

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // 允许配置`createTheme`时传入`status`字段
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}

注意：必须先导入@mui/material/styles，再声明模块，否则TypeScript不会合并类型。

2. 检查tsconfig.json的配置 #

确保TypeScript能正确识别该.d.ts文件：

• 确认include数组包含src/theme/**/*.d.ts，示例配置：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src/**/*", "src/theme/**/*.d.ts"],
  "exclude": ["node_modules"]
}

• 若项目使用paths别名，需确认其未影响.d.ts文件的解析。

3. 在theme.ts中关联类型定义（可选，提升可靠性） #

在src/theme/theme.ts顶部添加三斜线指令，强制TypeScript关联类型定义文件：

/// <reference path="./theme.d.ts" />
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  status: {
    danger: '#e53e3e',
  },
});

export default theme;

4. 清除TypeScript缓存并重启IDE #

TypeScript缓存可能导致类型不更新，执行以下操作：

• 运行npx tsc --clearCache清除缓存
• 重启IDE（VSCode可按Ctrl+Shift+P选择"TypeScript: Restart TS Server"）

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