如何通过d.ts文件覆盖@mui组件类型，使Button的id必填？

要让MUI所有Button组件的id属性变为必填，无需修改源码，只需在.d.ts文件中直接扩展MUI对外暴露的Props接口即可，具体操作如下：

步骤 #

1. 在项目中创建一个.d.ts文件（例如src/mui-type-overrides.d.ts，位置和名称可自定义，只要TypeScript能识别到）。
2. 将以下代码写入该文件：

// 覆盖ButtonBase的props，将id设为必填
// MUI的Button组件继承自ButtonBase，因此此修改会自动作用于Button组件
declare module '@mui/material/ButtonBase' {
  interface ButtonBaseProps {
    id: string;
  }
}

// 若仅需单独修改Button组件、不影响其他基于ButtonBase的组件，可添加以下代码（可选）
// declare module '@mui/material/Button' {
//   interface ButtonProps {
//     id: string;
//   }
// }

3. 确保tsconfig.json的include字段包含此.d.ts文件，示例配置：

{
  "include": ["src/**/*", "src/mui-type-overrides.d.ts"]
}

原写法无效的原因 #

你之前修改的ExtendButtonBaseTypeMap是MUI内部用于生成类型的底层接口，并非对外暴露的Props接口，因此修改后不会影响组件的实际类型校验。只有扩展ButtonBaseProps这类公开的接口，TypeScript才会自动合并类型定义，从而达到覆盖效果。

与Chakra UI写法的差异 #

Chakra UI的Button组件直接复用了React原生的ButtonHTMLAttributes，因此扩展React全局接口即可生效；而MUI的组件拥有独立封装的Props体系，必须针对MUI的模块进行类型扩展才能生效。

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