将React SVG组件作为div的background-image

14 浏览
0 Comments

将React SVG组件作为div的background-image

我正在尝试使用styled-components将一个作为react组件的SVG设置为background-image，但是我得到了如下错误：

TypeError: 无法将Symbol值转换为字符串

SVG组件代码：

import React from "react";
const testSVG = props => {
  return (
    
      
        
          
            
          
        
      
    
  );
};
export default testSVG;

容器组件代码：

import React, { Component } from "react";
import StepSVG from "../../components/UI/SVGs/Test";
class StepBar extends Component {
  render() {
    const { steps } = this.props;
    return (
        {steps
          ? steps.map(step => {
              return (
                
                  

                    {" "}
                    {step.title} 
                  

                
              );
            })
          : null}
    );
  }
}
export default StepBar;
const Wrap = styled.div`
  padding: 30px 30px 0 0;
  display: inline-block;
  background-image: url(${props => props.bg});
`;

我正在使用create-react-app开发。

我也尝试了不使用styled-components，而是使用内联样式替代，但没有成功。

在这种情况下，是否可能将SVG作为background-image使用，而SVG是一个组件？

0