Material-UI自定义UI库导出主题后 主项目调用自定义配色报错如何解决

你对MUI Palette的类型扩展仅在自定义UI库内部生效，打包发布时没有将扩展的类型声明同步导出，导致主项目引入theme后，TS无法识别你新增的自定义配色属性，触发类型报错。

步骤1：调整UI库的声明文件格式 #

将extendPalette.ts重命名为extendPalette.d.ts（TS声明文件标准后缀），确保其内容为全局模块扩展：

declare module '@material-ui/core/styles/createPalette' {
  export interface PaletteOptions {
    gradients: {
      primary: string
      secondary: string,
    },
  }
  export interface Palette {
    gradients: {
      primary: string
      secondary: string,
    },
  }
}

步骤2：配置UI库的TS打包规则 #

修改UI库的tsconfig.json，开启类型声明生成，确保声明文件被包含到编译范围：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./dist/types",
    // 其余原有配置保持不变
  },
  "include": ["src/**/*", "src/**/*.d.ts"],
  "exclude": ["node_modules", "src/**/*.test.ts"]
}

步骤3：配置UI库的package.json发布规则 #

在package.json中指定类型入口，确保发布时包含类型文件：

{
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ]
}

如果使用tsup、rollup等工具打包，需要额外开启类型打包配置：

• tsup配置示例（tsup.config.ts）：

import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['src/index.ts'],
  dts: true, // 自动打包类型声明
  // 其余原有配置保持不变
})

步骤4：校验依赖版本一致性 #

确保自定义UI库和主项目使用的@material-ui/core版本为同一大版本，避免版本差异导致的类型不兼容。

步骤5：主项目验证 #

重新发布UI库后，在主项目更新依赖版本，重启TS服务即可识别自定义的gradients属性。如果还有临时类型报错，可以用类型断言过渡：

const useStyles = makeStyles((theme: any) => ({
  bg: {
    background: theme.palette.gradients.primary
  }
}))

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