使用TypeScript+styled-components传递size props时出现类型错误

嘿，这个问题我之前踩过坑！其实核心原因是size这个属性名和styled-components内部的类型定义或者HTML元素的固有属性撞车了，TypeScript没办法自动识别这是你自定义的Props，所以才抛出了那个类型错误。

下面给你两种靠谱的解决方案：

1. 显式定义Styled组件的Props类型 #

直接用TypeScript泛型给你的styled组件指定自定义Props，让TypeScript明确知道size是合法的：

import styled from 'styled-components';

// 先定义你的Props接口，指定size的类型
interface StyledTextProps {
  size?: string; // 也可以用更具体的联合类型，比如 '12px' | '16px' | '24px'
}

// 通过泛型把Props传给styled组件
const StyledText = styled.div<StyledTextProps>`
  font-size: ${props => props.size || '16px'};
`;

// 父组件使用时就不会报错了
const ParentComponent = () => {
  return <StyledText size="20px">Hello World</StyledText>;
};

2. 使用attrs方法定义Props（带默认值） #

如果你需要给size设置默认值，用attrs方法也能同时解决类型问题：

import styled from 'styled-components';

interface StyledTextProps {
  size?: string;
}

const StyledText = styled.div.attrs<StyledTextProps>((props) => ({
  // 设置默认值，如果父组件没传size就用这个
  size: props.size || '16px',
}))<StyledTextProps>`
  font-size: ${props => props.size};
`;

为什么其他名字不会报错？ #

因为size是部分HTML元素（比如<input>、<img>）的固有属性，styled-components的类型定义里包含了这些元素的固有属性集合。当你传递自定义的size时，TypeScript会混淆它到底是HTML元素的原生属性还是你的自定义Props，而用像textSize这类不冲突的名字时，就不会有这个类型混淆的问题啦。

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