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

编程问答 2022-05-15

问题描述

我正在尝试找出从 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;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

styled-componentsstyled-systemtypescripttypescripttypescript