Styled Components报错：Property 'name'不存在于ThemedStyledProps类型

解决Styled Components中TypeScript自定义Props类型错误的问题 #

你碰到的是TypeScript和Styled Components结合时的类型不匹配问题——默认情况下，Styled Components只识别HTML元素的原生属性，你自定义的name、size、transform这些属性不在<span>的原生属性列表里，所以TS会报错说这些属性不存在。而且你把IconContainer设为any虽然能暂时压制错误，但这相当于放弃了TypeScript的类型安全，不是长久之计。

这里给你一个正确的解决方案，通过定义明确的Props类型来解决这个问题：

首先，我们创建一个包含自定义属性的接口，同时继承<span>的原生属性类型：

import styled from 'styled-components';
import type { HTMLAttributes } from 'react';

// 定义组件的Props类型，继承span的所有原生属性，加上我们自定义的属性
interface IconContainerProps extends HTMLAttributes<HTMLSpanElement> {
  name: string; // 必填的图标名称
  size: string; // 必填的字体大小
  color?: string; // 可选的颜色，加?标记为可选
  transform?: string; // 可选的变换属性
}

接下来，在创建styled组件的时候，通过泛型指定这个Props类型，attrs和组件本身都要明确指定：

const IconContainer = styled.span.attrs<IconContainerProps>((props) => ({
  className: `icon-${props.name}`
}))<IconContainerProps>`
  display: inline-block;
  font-size: ${props => props.size};
  // 给可选属性加默认值，避免出现undefined的情况
  color: ${props => props.color || 'inherit'};
  transform: ${props => props.transform || 'none'};
`;

这样修改之后，TypeScript就能正确识别你的自定义Props了，既不会报错，又能保留类型检查的优势。如果你不需要某些属性是必填的，就用?标记为可选，同时在样式里设置合理的默认值，使用组件时也会更灵活。

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