如何为带自定义Props的React Styled Component标注类型？

问题场景 #

在实现表单的复合组件模式时，给带自定义Props的styled组件做类型标注时出现类型不兼容错误。例如：

type Form<T> = T & {
  Row: React.FC<{ children: React.ReactNode }>;
};

const Form: Form<React.FC<{ type?: string | undefined }>> = styled.form<{
  type?: string | undefined;
}>`
 /* Styled using props */
`;

会抛出错误：

Type 'IStyledComponent<"web", Substitute<DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, { type?: string | undefined; }>>' is not assignable to type 'Form<FC<{ type?: string | undefined; }>>'

错误原因 #

styled-components返回的组件类型是IStyledComponent，并非标准的React.FC。直接用React.FC约束styled组件会导致类型不匹配，因为IStyledComponent包含了样式相关的内部类型信息，和普通函数组件类型结构不同。

解决方案 #

核心思路是利用TypeScript的自动类型推导，或基于styled组件的实际类型扩展复合组件属性，不要强行用React.FC约束styled组件。

方案1：自动推导+动态扩展属性 #

// 1. 定义自定义Props类型
type FormProps = {
  type?: string;
};

// 2. 创建styled组件，让TS自动推导类型
const Form = styled.form<FormProps>`
  /* 使用自定义Props编写样式 */
  padding: 16px;
  background: ${props => props.type === 'compact' ? '#f0f0f0' : '#ffffff'};
`;

// 3. 设置默认Props
Form.defaultProps = {
  type: "regular",
};

// 4. 定义Row子组件
const StyledFormRow = styled.div`
  margin-bottom: 12px;
`;
const Row = ({ children }: { children: React.ReactNode }) => {
  return <StyledFormRow>{children}</StyledFormRow>;
};

// 5. 直接给Form添加Row属性，TS会自动合并类型
Form.Row = Row;

方案2：显式定义复合组件类型 #

如果需要显式标注复合组件的类型，可以通过typeof获取styled组件的实际类型，再交叉扩展子组件属性：

// 1. 自定义Props类型
type FormProps = {
  type?: string;
};

// 2. 创建基础styled组件
const BaseForm = styled.form<FormProps>`
  /* 样式代码 */
`;

// 3. 定义复合组件的类型
type FormComponent = typeof BaseForm & {
  Row: React.FC<{ children: React.ReactNode }>;
};

// 4. 初始化带复合属性的组件
const Form: FormComponent = BaseForm as FormComponent;

// 5. 设置默认Props
Form.defaultProps = { type: "regular" };

// 6. 定义并挂载Row组件
const StyledFormRow = styled.div``;
const Row: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return <StyledFormRow>{children}</StyledFormRow>;
};
Form.Row = Row;

关键要点 #

• 不要用React.FC直接约束styled组件，尊重styled-components的原生类型。
• 自定义Props类型单独抽离，传入styled.form<CustomProps>即可让styled-components识别样式中的props类型。
• 复合组件的子属性（如Row）可以直接挂载到styled组件上，TypeScript会自动处理类型合并。

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