Как набирать attrs и стили реквизита в стилизованных компонентах - React

Question

Стили:

interface BtnProps {
  variant: string;
  size: string;
  mr: number;
}

const Btn = styled(Button).attrs<BtnProps>(({ variant, size }) => ({
  forwardedAs: Link,
  size: size ?? 'md',
  variant: variant ?? 'primary'
}))<BtnProps>`
  color: white;
  margin-right: ${({ mr }) => mr ?? '10px'};
  &:hover {
    color: white;
  }
`;

TypeScript не проверяет тип переменной mr, я могу поместить в нее все, что захочу.

Answer 1

Проблема с моим кодом: forwardedAs.

Получен ответ:

Да, когда вы визуализируете пользовательский компонент вместо HTML примитива, например, "div" мы не фильтруем реквизиты.

источник: https://github.com/styled-components/styled-components/issues/3039