Search code examples
reactjsstyled-components

How to swap images url in styled component?

I want to swap two background-image urls in the styled component , but my code it's not working , I don't know it‘s my syntax problem or something else. I checked the styled component website, but I didn't find anything similar.

background-image: ${props => 
    props.failed ? "url(${ progressFailed })":"url(${ progress })"
};
Solution

  • You'll have to interpolate the progressFailed and the progress variables as well. Right now they're just being treated as string and not being evaluated.

    export default styled.section`
  background-image: ${props => 
    props.failed ? `url(${progressFailed})` : `url(${progress})`
  };
`

    Hope this helps !