React Material UI+TS扩展Theme时如何快速定位需声明的正确模块

核心逻辑 #

扩展MUI主题分两个独立环节，网上的教程经常把二者混为一谈：

• 类型扩展：用declare module声明补充TypeScript类型定义，解决TS语法飘红问题
• 运行时配置：在createMuiTheme中给自定义属性赋值，实现实际的样式生效
  两者必须配合使用，不存在二选一的情况。

精准定位需要扩展的模块步骤 #

1. 跳转本地类型定义找路径
   在你的业务代码中，找到你要修改的目标类型，比如你要扩展palette的属性，就按住Ctrl（Mac系统按Cmd）点击代码中用到的palette、createPalette或者Theme['palette']字段，跳转到MUI依赖包内置的类型定义源文件，查看文件顶部声明的模块路径，就是你需要用declare module扩展的准确路径，完全不需要网上搜索。
   比如你跳转后看到文件顶部写的是：

declare module '@material-ui/core/styles/createPalette' {
  // 内置的Palette、PaletteOptions等接口定义
}

那你扩展时的模块路径就严格按照这个写，不会出现版本不匹配的问题。
2. 扩展对应接口
注意需要同时扩展「最终主题类型」和「配置输入类型」两个接口，比如扩展palette的background属性需要同时修改Palette和PaletteOptions：

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    background: Palette['background'] & {
      // 新增你要自定义的属性
      card: string;
      sidebar: string;
    }
  }
  interface PaletteOptions {
    background?: PaletteOptions['background'] & {
      // 配置项的属性要设为可选，和内置类型保持一致
      card?: string;
      sidebar?: string;
    }
  }
}

3. 运行时配置赋值
   在createMuiTheme中给你新增的属性赋值即可，此时TypeScript不会再报属性不存在的错误：

import { createMuiTheme } from '@material-ui/core/styles';

const customTheme = createMuiTheme({
  palette: {
    background: {
      default: '#ffffff',
      paper: '#fafafa',
      card: '#f0f0f0',
      sidebar: '#2d2d2d'
    }
  }
});

常见注意事项 #

• 不要直接照搬网上的模块路径，MUI v4和v5的路径差异极大，本地跳转得到的路径才是适配你当前安装版本的准确路径
• 如果扩展后依然飘红，检查你是否漏写了XxxOptions接口，或者模块路径和类型定义源文件的声明不一致
• 自定义属性的类型要和内置属性的类型保持兼容，避免出现类型冲突

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