Использование TypeScript и Styled Components `as` prop

Question

У меня есть стилизованная кнопка:

import { Link } from 'react-router-dom'
import styled from 'styled-components'

const Button = styled(Link)`
  display: block;
  border: 1px solid white;
  padding: 5px; 
`

Я могу использовать его как Link:

<Button to='/' />

Но иногда я хотел бы использовать его как a:

<Button as='a' href='/' />

Но во втором случае TypeScript жалуется:

Type '{ children: string; as: string; href: string; }' is not assignable to type 'Readonly<ThemedOuterStyledProps<WithOptionalTheme<LinkProps, any>, any>>'.
Property 'to' is missing in type '{ children: string; as: string; href: string; }'.

"как" полиморфная опора

Answer 1

Не работает из-за этой @types/styled-components проблемы -> ссылка

Answer 2

TypeScript жалуется, потому что ваш Link компонент, полученный из react-router, требует, чтобы вы указали to prop. Я не уверен, чего вы пытаетесь достичь, но Link уже должен отображаться как тег <a />.

Если вы хотите сделать ссылку, скажем, на внешний веб-сайт, вы, вероятно, не хотите использовать styled(Link), но styled.a.

Если вы беспокоитесь о повторении вашего стиля для styled(Link) и styled.a, вы, вероятно, захотите написать многократно используемый стиль кнопок, используя вспомогательную функцию css , и включить его в оба ваших стилизованные компоненты.

К сожалению, я считаю, что пока это единственный вариант, так как я был в аналогичном случае и пытался использовать as={Link} на styled.a, а TypeScript жалуется на нераспознанные реквизиты. Я полагаю, что реализация полиморфной поддержки as в TypeScript не является полностью функциональной, поэтому позже может быть исправлено.