Search code examples
styled-components

Background: url() using .attrs() function

I'm trying to display a different background depending on props with .attrs();

I have the following;

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

However, it doesn't display anything. How exactly does this function work?

Solution

  • I don't know why you're trying to use .attrs here, but it's used to attache some props to a styled component.

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

    To make your code work, you could try:

    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