Переопределить реквизиты с помощью styled-компонентов и машинописи

Question

Я использую компонент, у которого есть свойство, которое требуется. Я хочу стилизовать этот компонент с указанным набором свойств и не требовать его установки снова при рендеринге. Если я не установлю его снова, Typescript будет жаловаться.

Суть того, что я хочу сделать:

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

И нет необходимости устанавливать icon при рендеринге.

Если я сделаю это

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

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

Мне все равно придется установить icon при рендеринге.

Есть ли какой-то способ, которым я могу добиться этого, или это мой единственный выход для модификации реквизита of Arrow с машинописью-волхвами c?

---

Использование

• машинописный текст 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
}))`

`;

Документы