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

【问题标题】：Override props with styled-components and typescript使用样式组件和打字稿覆盖道具
【发布时间】：2020-06-03 09:50:28
【问题描述】：

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

我想做的事情的要点：

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

渲染时不需要设置icon。

如果我这样做

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

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

渲染时我还是要设置icon。

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

使用

【问题讨论】：

【解决方案1】：

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

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

`;

【讨论】：