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

Question

我试图找出从StyledComponent

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

例如，我有一个样式组件

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

现在我希望类型是输入道具（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;
}