如何在样式组件中键入属性和样式道具 - React

Question

Styles:

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 doesn't check type of mr variable, i can put whatever i want in it.

Answer 1

Issue with my code was forwardedAs .

Got an answer:

Yes when you render a custom component instead of a HTML primitive, eg "div" we don't filter props.

source: https://github.com/styled-components/styled-components/issues/3039