将背景 url 作为道具传递给样式化组件答案

【问题标题】：pass background url as prop to styled component将背景 url 作为道具传递给样式化组件
【发布时间】：2018-02-03 04:53:24
【问题描述】：

我有以下代码：

// @flow
import React from 'react';
import { Route } from 'react-router-dom';
import Split from '../../components/grouping/Split';
import CenterBox from '../../components/grouping/CenterBox';
import styled from 'styled-components';

type Props = {
  routes: Array<Object>,
  background: String
};


export default ({ routes, background }: Props) =>
  (<div>
    <Split push="right" alignItems="center" height={50} pad={{ horizontal: 20 }}>
      <div />
      <div>This feature will be available soon!</div>
    </Split>
    <DashboardContent background={background}>
      <CenterBox>
        <div style={{ transform: 'translateY(50%)' }}>
          <CenterBox height={300} width={500} backgroundColor="#FFFFFF">
            This feature is not included as part of the design beta and will be available soon
          </CenterBox>
        </div>
      </CenterBox>
    </DashboardContent>
  </div>);



  const DashboardContent = styled.div`
  background: url(${props => props.background}) no-repeat top
      center;
    background-size: 100%;
    min-height: 100vh;
  `;

我想将背景作为道具传递给我的样式化组件，这样当它传递到图像文件的链接时，它会将其设置为背景，代码编译但背景不显示。我究竟做错了什么？

【问题讨论】：

你检查过你的“样式化组件”CSS吗？

标签： reactjs styled-components

【解决方案1】：

将背景属性更改为返回字符串的函数将解决您的问题。

background: ${props => `url(${props.background}) no-repeat top center`};

【讨论】：

【解决方案2】：

这会成功吗？

 const DashboardContent = styled.div`
  background: url(${props => props.background}) no-repeat top center;
 `

 <DashboardContent background={`https://xxxx/xxxx${background}`}/>

【讨论】：