React TS2322报错：className不存在于IntrinsicAttributes类型

报错原文：Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes'. Property 'className' does not exist on type 'IntrinsicAttributes'.ts(2322)

这个类型错误的核心逻辑非常明确：

• 代码中给自定义组件UiuxDesigner传入了className属性，但UiuxDesigner（以及同片段里的All、UxResearcher这类自定义图标组件）的Props类型定义里，没有显式声明接收className字段。
• TypeScript做静态类型校验时，会读取组件预先定义的合法属性列表（即报错中提到的IntrinsicAttributes类型），发现列表中不存在className属性，就会判定属性传入不合法，抛出类型不匹配错误。
• 注意：只有div、span这类原生HTML标签默认内置了className的类型声明，所有自定义React组件都需要手动在Props类型里声明className属性，TS才会认可该传参合法。
• 外层的Icon组件本身的Props定义没有问题，报错和外层组件无关。

根据图标组件的来源分场景处理：

• 场景1：图标组件是项目内自行编写的
  给每个需要接收类名的图标组件补充Props类型声明，同时在组件内部把传入的className绑定到根DOM节点上即可。
  示例修改（以UiuxDesigner组件为例，其余图标组件修改逻辑一致）：

  // 给组件的Props类型补充className字段
  type UiuxDesignerProps = {
    // 组件原本需要的其他自定义属性保留
    className?: string; // 新增：声明可选接收string类型的className
  }
  
  export function UiuxDesigner({ className }: UiuxDesignerProps) {
    // 组件内部把className绑定到最外层的svg/其他根标签上
    return (
      <svg className={className} /* 其他原有属性保留 */>
        {/* 图标路径等原有内容保留 */}
      </svg>
    )
  }
  

• 场景2：图标组件是从第三方依赖引入的
  • 先查阅对应依赖的文档，确认组件传类名的正确属性名——部分第三方组件可能不用className，而是用customClass、wrapperClassName之类的自定义属性传类名，按文档要求传参即可
  • 如果确认组件本身支持接收className透传，只是第三方包自带的类型定义缺失，可以临时通过类型断言绕开校验，但长期建议补充完善的类型声明，不建议长期用断言绕过类型检查。

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