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

Question

我在我的 React 项目中使用样式化组件，我有一个 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" />

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

Different background images for the same styled-component in React

javascript

css

reactjs

styled-components