pass background url as prop to styled component

问题

I have the following code:

// @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;
  `;

I would like to pass background as a prop to my styled component so that when it is passed a link to an image file it sets it as a background, the code compiles but the background does not show up. What am I doing wrong?

回答1:

Changing your background property to be a function that returns a string will fix your issue.

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

回答2:

Is this going to work out fine?

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

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

来源：https://stackoverflow.com/questions/45876313/pass-background-url-as-prop-to-styled-component

标签

reactjs

styled-components