TypeScript中使用styled-components添加原生属性时报错：No overload matches this call

方案1：直接使用styled.img继承原生属性 #

如果你的图片组件仅对原生img做样式定制，无需额外自定义属性，直接用styled.img创建组件即可——它会自动继承HTMLImageElement的所有原生属性（包括alt、src、width等），无需额外类型配置：

// style.ts
import styled from 'styled-components';

export const StyledImage = styled.img`
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
`;

使用时直接传递原生属性不会报错：

<StyledImage src="/example.jpg" alt="示例图片" />

方案2：自定义属性+原生属性的类型合并 #

如果需要给组件添加自定义属性，同时保留原生img的所有属性，需手动定义Props类型，合并自定义属性与ImgHTMLAttributes：

// style.ts
import styled from 'styled-components';
import type { ImgHTMLAttributes } from 'react';

// 合并原生img属性与自定义属性
type StyledImageProps = ImgHTMLAttributes<HTMLImageElement> & {
  customBorder?: boolean; // 自定义属性示例
};

export const StyledImage = styled.img<StyledImageProps>`
  width: 100%;
  height: auto;
  ${props => props.customBorder && 'border: 2px solid #eee;'}
`;

使用时既可以传原生属性，也可以传自定义属性：

<StyledImage 
  src="/example.jpg" 
  alt="示例图片" 
  customBorder={true} 
/>

方案3：函数组件包裹styled元素的类型处理 #

如果是用函数组件封装styled.img，要确保函数组件的props类型包含原生img属性：

// style.ts
import styled from 'styled-components';
import type { ImgHTMLAttributes } from 'react';

const BaseImage = styled.img`
  width: 100%;
  height: auto;
`;

// 定义props类型为原生img属性
export const Image = (props: ImgHTMLAttributes<HTMLImageElement>) => {
  // 可添加额外逻辑
  return <BaseImage {...props} />;
};

错误原因说明 #

出现“No overload matches this call”错误，本质是TypeScript无法识别组件接受的原生img属性——要么是你没有使用styled.img而是自定义了无类型的组件，要么是自定义组件的props类型未包含原生属性集合，导致类型校验不通过。

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