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

【问题标题】：Different background images for the same styled-component in ReactReact 中相同样式组件的不同背景图像
【发布时间】：2020-02-23 00:13:48
【问题描述】：

我在我的 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;
`

有什么方法可以在不复制样式组件的情况下更改背景图像？为主页的每个部分归档不同的背景？

【问题讨论】：

在你的样式组件周围包裹一个组件，并传递一个 prop 给它。使用道具作为图像。
您可以为所有 div 赋予相同的class 名称但不同的id，并且只更改每个id 的background-image 属性。

标签： javascript css reactjs styled-components

【解决方案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" />

【讨论】：