TypeScript：从样式化函数组件和样式化系统类型中提取类型

如何解决TypeScript：从样式化函数组件和样式化系统类型中提取类型

我正在尝试找出从 StyledComponent 中提取类型的最佳方法

例如，我有一个使用 InputBase 组件的组件，我想提取样式组件的所有类型 + 我的自定义道具。

例如我有一个样式组件

const Input = styled.input<BoxProps>`
  ${css({
    backgroundColor: 'white',border: '0.5px solid #CFCFCF',borderRadius: '8px',width: '100%',minHeight: '44px',})}
  ${styleFunctions}
`;

现在我希望类型是 Input Props（onChange ete 等）和 BoxProps。

type Props = Merge<
  React.HTMLAttributes<HTMLInputElement>,BoxProps & {
    loading?: boolean;
  }
>;
export const TextField = forwardRef<HTMLInputElement,Props>(({ ...props },ref) => {
  return <Input {...props} ref={ref} placeholder="Search..." />;
});

类似的东西，但是在这个例子中我得到了太多不兼容的错误，可能是因为 BoxProps 和 InputElement Props。 有什么好方法可以提取输入的类型并将其与

结合

type CustomProps = {
  loading?: boolean;
}