如何在React中覆盖DOM元素className属性的TypeScript类型

要覆盖React默认的className类型，你需要通过**TypeScript模块扩充（Module Augmentation）**修改@types/react中的HTMLAttributes接口，具体步骤如下：

1. 在项目根目录创建或修改project.d.ts文件，写入以下代码：

   // 依赖clsx的类型更精准，匹配插件实际处理的参数格式
   import type { ClassValue } from 'clsx';
   
   declare module 'react' {
     // 扩充HTMLAttributes接口，覆盖className的默认类型
     interface HTMLAttributes<T> {
       className?: ClassValue;
     }
   }
   
   // 必须添加这行，让文件成为TypeScript模块，确保扩充规则生效
   export {};
   

2. 若不想依赖clsx类型，也可以直接指定你需要的类型范围：

   declare module 'react' {
     interface HTMLAttributes<T> {
       className?: string | undefined | any[] | Record<string, boolean>;
     }
   }
   
   export {};
   

3. 确认tsconfig.json包含该.d.ts文件：
   在include数组中添加对应路径，示例：

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

为什么之前修改无效？ #

React的className类型默认定义在@types/react的HTMLAttributes接口中，你之前自定义属性生效是因为新增了未定义的属性，而要修改已有属性，必须在declare module 'react'的代码块内重新定义该属性，TypeScript才会用新类型覆盖默认值。

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