如何在样式化组件中键入 attrs 和样式道具 - React答案

【问题标题】：How to type attrs and styles props in styled components - React如何在样式化组件中键入 attrs 和样式道具 - React
【发布时间】：2020-06-11 02:45:05
【问题描述】：

样式：

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 变量的类型，我可以在其中放入任何我想要的东西。

【问题讨论】：

标签： javascript reactjs typescript styled-components

【解决方案1】：

我的代码有问题是forwardedAs。

得到答案：

是的，当您呈现自定义组件而不是 HTML 原语时，例如“div”我们不过滤道具。

来源：https://github.com/styled-components/styled-components/issues/3039

【讨论】：