javascript - 在 styled-components 中将背景作为道具传递
问题描述
我正在尝试将背景作为样式组件中的道具传递,但我不确定如何通过我的 cdn 函数传递它,因为它无法在 css 中正确输出
这是css的输出:
background: url(https://local.dev:5601/pub/media/icons/menu/function (props) { return props.background;}.png);
如何通过我的 cdn 函数传递道具?
配置.js
export function cdn(path) {
return `https://local.dev:5601/pub/media/${path}`;
}
class Config {
cdn
}
export default Config;
应用程序.js
import React from "react";
import styled from 'styled-components'
const Circle = styled.span`
display: block;
position: relative;
width: 35px;
height: 35px;
cursor: pointer;
border-radius: 50%;
background: url("${cdn('icons/menu/' + (props => props.background) + '.png')}");
margin: 5px;
`
const CircleWrap = styled.div`
display: flex;
flex-wrap: wrap;
padding: 0 0 5px 0;
`
class App extends React.Component {
selectColor = (color) => {
this.props.selectColor(color);
}
render() {
return (
<SettingDrop
title={"Profilfarbe"}
closeDropdown={this.props.closeDropdown}
openDropdown={this.props.openDropdown}
isOpen={this.props.isOpen}
isHidden={this.props.isHidden}
isValid={this.props.isValid}
icon={<ProfilFarbe />}
>
<CircleWrap>
{console.log(this.props.colors)}
{this.props.colors.map( color =>
<Circle
background={color.hash}
onClick={()=>this.selectColor(color.alias)}
>
</Circle>
)}
</CircleWrap>
</SettingDrop>
);
}
};
解决方案
以下语法将起作用:
background: url("${cdn('icons/menu/')}${props => props.background}.svg");
推荐阅读
- node.js - Thinkster.io MEAN 堆栈问题设置身份验证路由
- c# - .Net 4.8 中的 Azure 应用程序配置 LabelFilters 无法正常工作
- amazon-s3 - 是否可以在不创建 ObjectBucketClaim(OBC) 的情况下创建 Noobaa 存储桶?
- c# - 文件中的排序行取决于c#中文件本身的内容
- php - 我应该使用 DB::rollback() 吗?
- sql - 从最后一个可用值 SQL 中获取最新信息
- pdf - 展平后缺少注释(戳记)
- python - 在 Windows 10 中安装 pygraphviz - 缺少 basetsd.h
- javascript - 如何更改代码以便地图在悬停时正确显示数据?
- python-3.x - 试图将我在 Tkinter GUI 中制作的内容直接放入文件中