Фон: url () с использованием функции .attrs ()

Question

Я пытаюсь отобразить другой фон в зависимости от реквизита с помощью .attrs ();

У меня есть следующее;

const Heart = styled.div.attrs(props => ({
    background: `url(${props => props.filled ? "./media/heart-filled.png" : "./media/heart-empty.png"})`
}))`
//rest of styles here.
`;

Однако, он ничего не отображает. Как именно эта функция работает?

Answer 1

Я не знаю, почему вы пытаетесь использовать .attrs здесь, но он используется для прикрепления некоторых реквизитов к стилизованному компоненту.

https://styled-components.com/docs/api#attrs

Чтобы ваш код работал, вы можете попробовать:

const Heart = styled.div.attrs(props => ({/* Some aditional props here ! */}))`
   background: url(${props => (props.filled ? "./media/heart-filled.png" : "./media/heart-empty.png")}); /* props that you pass into your component can be used here */
   /* rest of styles here. */
`;

https://codesandbox.io/s/condescending-brown-lx0lf?file= / src / App. js