使用样式组件和打字稿覆盖道具

Question

我正在使用具有所需属性的组件。我想使用所述属性集来设置该组件的样式，并且在渲染时不需要再次设置它。如果我不重新设置它，Typescript 就会抱怨。

我想做的事情的要点是：

const Arrow = styled(<Icon icon={"ArrowRight"}/>)`
    ...
`;

并且渲染时不需要设置icon。

如果我这样做

const Arrow = styled(Icon)`
    ...
`;

Arrow.defaultProps = {
    icon: "ArrowRight",
};

渲染的时候还是要设置一下icon。

有什么方法可以实现这一点，或者是我用 typescript-magic 修改 Arrow 属性的唯一方法？

---

使用

• 打字稿 3.7.5
• 反应16.12.0
• 样式组件 5.0.1

Answer 1

styled-components有一个 API 命名，attrs以便您可以将属性附加到 DOM 元素或组件。

const Arrow = styled(Icon).attrs(props => ({
  icon: props.icon // or whatever you want here
}))`

`;

文档