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

Question

我在我的 React 元素中使用 styled-components，我有一个 styled.div 用于主页中的 2 个不同部分。 带样式的组件如下所示:

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

有没有办法在不复制样式组件的情况下更改背景图像？要为主页的每个部分设置不同的背景？

Answer 1

您可以提供props到样式组件:

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

然后你会像那样使用它:

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