React中如何用TypeScript定义SVG组件？如何解决Material UI SvgIcon类型报错？

• 类型不匹配核心原因：你封装的SVGIcon组件声明继承的是MUI原生SvgIconProps类型，该类型定义中不存在data属性，你在调用时传入了data={icon}属于传入未定义的非法属性，触发TS类型校验失败。
• 额外存在的错误点：
  1. 定义Props接口时icons字段写为[{...}]格式，属于长度固定为1的元组类型，不是任意长度的数组类型，和你实际传入的数组不匹配。
  2. 你定义的SVG对象数组中存储图标的字段名为icons，但Props接口中定义的字段名为icon，字段名不匹配导致取值异常。
  3. Title组件参数解构存在语法错误，多写了一个闭合大括号：({icons=[]}})。

1. 修正Props接口类型，统一字段名，将元组改为数组类型：

interface Props {
    icons?: Array<{
        id:number;
        icon:React.ReactNode;
        style?:React.CSSProperties;
    }>;
}

2. 修正你的SVG对象数组的字段名，和接口保持一致：

[
    {
        id:1,
        icon: MySVGIcon,
        style: iconStyle
    }
]

3. 修正SVGIcon组件的类型定义和传参逻辑，两种可选方案：
   方案一：无需自定义属性，直接将图标作为children传入

// 调用时写法
{icons.map(({icon, id, style}) => <SVGIcon key={id} sx={style}>{icon}</SVGIcon>)}

方案二：需要自定义icon属性则扩展类型定义

import React from 'react'
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';

// 扩展SvgIconProps添加自定义属性
interface SVGIconProps extends SvgIconProps {
  icon: React.ReactNode
}

const SVGIcon:React.FC<SVGIconProps> = ({icon, ...rest}) => {
    return (
        <SvgIcon {...rest}>{icon}</SvgIcon>
    )
}

// 调用时写法
{icons.map(({icon, id, style}) => <SVGIcon key={id} icon={icon} sx={style} />)}

4. 修正Title组件的语法错误：

const Title: React.FC<Props> = ({icons=[]}) => {
    // 原有逻辑不变
}

• 所有自定义SVG组件优先继承SvgIconProps类型，自动支持MUI原生的color、fontSize、sx、viewBox等所有属性。
• 自定义属性需要显式声明在扩展的接口中，不要传入未定义的属性。
• 若要直接复用已有的SVG组件，将其作为SvgIcon的children传入即可，无需额外修改SVG组件内部逻辑。
• 样式属性优先使用MUI的sx属性代替原生style，获得更好的类型校验和主题适配能力。

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