如何扩展MUI的ButtonProps使[data-testid]属性成为必填项？

你可以通过TypeScript的模块扩展特性修改MUI Button的Props类型，将[data-testid]设为必填项，但需要调整代码写法才能生效：

正确的类型扩展代码 #

创建一个.d.ts后缀的类型声明文件（比如src/@types/mui.d.ts），写入以下代码：

import type { ButtonProps } from '@mui/material/Button';

declare module '@mui/material/Button' {
  interface ButtonProps {
    ['data-testid']: string;
  }
}

确保代码生效的关键要点 #

• 目标接口正确：需要扩展的是ButtonProps（组件的props类型），而非Button（组件本身的类型），原代码的扩展对象有误。
• 文件格式与位置：使用.d.ts类型声明文件，放在TypeScript能扫描到的目录下（比如src目录内）。
• tsconfig配置：确保tsconfig.json的include字段包含该文件所在路径，示例配置：

  {
    "include": ["src/**/*"]
  }
  

完成上述配置后，使用MUI Button组件时，TypeScript会强制要求传入data-testid属性，否则会抛出类型错误。

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