reactjs - 用样式组件和 typescript 覆盖 Prop

Question

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

我想做的事情的要点:

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

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

如果我这样做

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

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

渲染时我仍然需要设置icon。

有什么方法可以实现这个，或者我唯一的出路是用 typescript-magic 修改 Arrow 的 Prop 吗？

---

使用

• typescript 3.7.5
• react 16.12.0
• 样式组件 5.0.1

Answer 1

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

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

`;

Docs