如何使用样式组件键入 Ant 设计？

Question

这是我公司代码审查中的一个经典点，通常我们会围绕使用 Ant 组件的样式化组件来解决：

const StyledInput = styled<any>(InputAnt)`
  ${p =>
    p.hasError &&
    `
    border-color: ${p.theme.red};
  `}
`

远非理想，因为它的行为与任何其他组件一样，需要更严格的类型。有趣的是，显而易见的方法仅适用于某些组件。见

interface ButtonP extends NativeButtonProps {
  isCustomProp: boolean
}

export const Button = styled<ButtonP>(p => <AntButton {...p} />)`
  color: ${p => p.isCustomProp ? 'pink' : 'steelblue'};
`

但是，其他组件将需要不同的类型机制。例如，与 Ant 的 Input 相同的方法将不起作用！：

interface StyledInputP extends InputProps {
  hasError: boolean
}

const StyledInput = styled<StyledInputP>(p => <InputAnt {...p} />)`
  ${p =>
    p.hasError &&
    `
    border-color: ${p.theme.red};
  `}
`

是否有指南或答案可以一劳永逸地解决这个问题！？

干杯

Answer 1

你可以尝试这样修改

interface StyledInputP extends InputProps {
  hasError: boolean
}

const StyledInput = styled((p: StyledInputP) => <Input {...p} />)`
  ${p =>
      p.hasError &&
        `
    border-color: ${p.theme.red};
  `}
`;