Javascript 在样式化组件中将背景作为道具传递

我试图在样式化组件中将背景作为道具传递，但我不确定如何通过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;

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

App.js

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

      class Config {
        cdn
      }


  export default Config;

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

从“React”导入React；
从“样式化组件”导入样式化
const Circle=styled.span`
显示：块；
位置：相对位置；
宽度：35px；
高度：35px；
光标：指针；
边界半径：50%；
背景：url（${cdn（'icons/menu/'+（props=>props.background）+'.png'））；
保证金：5px；
`
const CircleWrap=styled.div`
显示器：flex；
柔性包装：包装；
填充：0 5px 0；
`
类应用程序扩展了React.Component{
选择颜色=（颜色）=>{
this.props.selectColor（颜色）；
}
render（）{
返回(
{console.log（this.props.colors）}
{this.props.colors.map（color=>
this.selectColor（color.alias）}
>
)}
);
}
};
以下语法将起作用：

background:url（${cdn（'icons/menu/'）}${props=>props.background}.svg”）