如何重新导出已覆盖的MUI主题定义，使消费端识别自定义变体？

我将已完成的MUI主题从原项目中提取为独立库@myproject/theme，用于多应用共享和同步更新，但遇到了自定义Button变体（如toolbar）在消费端无法被TypeScript识别的问题——原项目中该变体可正常识别，安装到消费端后VSCode无法识别新增的toolbar变体。

主题库中的核心代码示例：

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    toolbar: true;
  }
}

export const myThemeOptions = {
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'toolbar' },
          style: { /* 自定义样式 */ }
        }
      ]
    }
  }
}

export const myLightTheme = createTheme(myThemeOptions, 'light');

请问如何正确导出类型定义，让消费端自动加载并覆盖MUI的原有类型？

解决方案 #

1. 配置主题库的TypeScript生成类型声明 #

在主题库的tsconfig.json中，必须开启declaration: true，确保编译时生成.d.ts类型声明文件。同时要保证include字段包含所有需要生成类型的文件：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./dist/types", // 指定类型文件输出目录
    "include": ["src/**/*"]
  }
}

2. 让消费端自动加载类型声明 #

有两种可靠方式实现自动加载：

• 方式一：通过package.json指定类型入口
  在主题库的package.json中添加types字段，指向编译后的类型入口文件：

{
  "types": "./dist/types/index.d.ts",
  "main": "./dist/index.js" // 对应你的JS输出入口
}

如果你的类型声明是单独的模块文件，直接指定该文件的编译后路径即可。

• 方式二：在主题入口文件中导入类型
  在主题库的入口文件（如src/index.ts）中，显式导入包含类型扩展的文件，这样消费端导入主题库时会自动加载类型：

// src/index.ts
import './button-variant-overrides'; // 存放Button变体类型声明的文件
export { myLightTheme, myThemeOptions };

3. 检查消费端的TypeScript配置 #

确保消费端的tsconfig.json没有屏蔽node_modules中的类型，默认情况下TypeScript会自动识别。如果存在识别问题，可手动在compilerOptions.types中添加主题库：

{
  "compilerOptions": {
    "types": ["@myproject/theme"]
  }
}

4. 验证编译后的类型输出 #

检查主题库编译后的.d.ts文件，确认其中包含了MUI类型的扩展声明，比如：

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    toolbar: true;
  }
}
export declare const myThemeOptions: {
    components: {
        MuiButton: {
            variants: {
                props: {
                    variant: 'toolbar';
                };
                style: {};
            }[];
        };
    };
};
export declare const myLightTheme: import("@mui/material/styles").Theme;

5. 保持MUI版本一致性 #

确保主题库和所有消费端使用的MUI主版本完全一致，不同版本的MUI类型定义结构可能存在差异，导致类型扩展不生效。

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