在 styled-components 中将背景作为道具传递答案

【问题标题】：Pass background as prop in styled-components在 styled-components 中将背景作为道具传递
【发布时间】：2018-12-01 00:53:47
【问题描述】：

我试图在 styled-components 中将背景作为道具传递，但我不确定如何通过我的 cdn 函数传递它，因为它在 css 中没有正确输出

这是css的输出：

background: url(https://local.dev:5601/pub/media/icons/menu/function (props) { return props.background;}.png);

如何通过我的 cdn 函数传递道具？

config.js

    export function cdn(path) {
        return `https://local.dev:5601/pub/media/${path}`;
      }

      class Config {
        cdn
      }


  export default Config;

App.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>
    );
  }
};

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案1】：

以下语法将起作用：

background: url("${cdn('icons/menu/')}${props => props.background}.svg");

【讨论】：