升级@types/styled-components后出现children属性类型错误

这个问题的核心是@types/styled-components 5.1.33~5.1.34版本中，类型定义做了未在更新日志中明确标注的严格化调整：

此前版本的类型系统会自动将React元素的默认属性（包括children）合并到你自定义的props接口中，即使你的接口没有显式声明children，编译器也不会报错。但新版本调整了类型合并逻辑，要求自定义props必须明确兼容React元素的核心属性，否则会触发类型不匹配错误——你的StyledContainerProps只声明了disabled，没有包含children，而使用<StyledContainer>时传入了子元素，导致编译器认为children属性不存在于当前props类型中。

解决方法 #

有三种常用方案可以修复这个问题：

1. 显式在props接口中声明children

import React from 'react';

interface StyledContainerProps {
  disabled: boolean;
  children?: React.ReactNode;
}

export const StyledContainer = styled.div<StyledContainerProps>`
  /* ... */
`;

2. 继承React.PropsWithChildren
   通过继承内置类型，自动包含children属性：

import React from 'react';

interface StyledContainerProps extends React.PropsWithChildren<{
  disabled: boolean;
}> {}

export const StyledContainer = styled.div<StyledContainerProps>`
  /* ... */
`;

3. 直接使用匿名对象类型（简化写法）
   如果不需要复用props接口，可以直接传入匿名对象类型，此时styled-components会自动合并React的默认属性：

export const StyledContainer = styled.div<{ disabled: boolean }>`
  /* ... */
`;

内容的提问来源于stack exchange，提问作者marcus-linmarkson