我有以下代码:
// @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;
`;
我想将背景作为道具传递给我的样式组件,以便当它传递到图像文件的链接时,它将其设置为背景,代码可以编译,但背景不会显示。我究竟做错了什么?
将背景属性更改为返回字符串的函数将解决您的问题。
background: ${props => `url(${props.background}) no-repeat top center`};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)