React 中相同样式组件的不同背景图像

Question

I am using styled-components in my React Project, and I have one styled.div that I use for 2 different sections in my homepage. The styled component looks like this:

    export const StyledContainer = styled.div`
    width: 100%;
    border-top: 1px green solid;
    margin: 10px auto;
    background-image: url(${img});
    background-size:cover;
`

Is there any way of changing the background-image without duplicating the styled component? To archieve different backgrounds for each section of the homepage?

Answer 1

You can provide props to the styled-component:

    export const StyledContainer = styled.div`
    width: 100%;
    border-top: 1px green solid;
    margin: 10px auto;
    background-image: ${props => `url(${props.img})`};
    background-size:cover;
`

And than you will use it like that:

<StyledContainer img="https://www.ciakroncato.com/media/productpersonalize/productpersonalize/1541242051download.jpeg" />