如何在MUI自定义主题中为扩展的Table尺寸添加TypeScript类型支持？

你已经通过以下声明扩展了Table组件的size属性，新增了relaxed和large两个选项：

declare module '@mui/material' {
  interface TablePropsSizeOverrides {
    relaxed: true
    large: true
  }
}

现在可以正常使用<Table size="relaxed" />，但在自定义主题中配置TableCell的样式覆盖时：

const materialTheme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        sizeSmall: {
          padding: '7px 16px', // 高度约40px
        },
        sizeRelaxed: {
          padding: '16px'
        }
      },
    },
  },
})

会出现TypeScript错误：'sizeRelaxed' does not exist in type 'Partial<OverridesStyleRules<keyof TableCellClasses, "MuiTableCell", Omit<Theme, "components">>>'

解决方法 #

要让TypeScript识别这些自定义样式类，需要扩展Material UI的TableCellClasses类型：

1. 扩展TableCellClasses接口
   在你的TypeScript类型声明文件（比如src/types/mui.d.ts）中添加以下代码：

declare module '@mui/material/TableCell' {
  interface TableCellClasses {
    sizeRelaxed: string;
    sizeLarge: string;
  }
}

2. 可选：同步扩展TableCell的size属性选项
   为了让TableCell组件单独使用size属性时也能获得类型提示，可以同时扩展TableCellPropsSizeOverrides：

declare module '@mui/material' {
  interface TableCellPropsSizeOverrides {
    relaxed: true;
    large: true;
  }
}

3. 确保类型声明被TypeScript读取
   检查你的tsconfig.json，确保include数组包含了存放上述声明的文件路径，比如：

{
  "include": ["src/**/*", "src/types/mui.d.ts"]
}

这样配置后，TypeScript就会认可sizeRelaxed和sizeLarge作为MuiTableCell的合法样式类名，主题配置中的错误就会消失。

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