Как набрать дизайн Ant с помощью стилизованных компонентов?

Question

Это классная c точка во время проверки кода в моей компании, обычно мы работаем над набором стилизованных компонентов, которые используют компонент 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's 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};
  `}
`;