Question

我试图将svg组件用作背景图像，将其作为支柱传递给我的css，但是我收到了错误：

未捕获的TypeError：无法将Symbol值转换为字符串

如何在样式化组件中使用svg组件作为背景图像？

CSS

const Div = styled.div`
  width: 20px;
  height: 100px;
  background: ${props => props.background};
`

应用

const App = () => (
  <Div background={<TriangleTrim />}></Div>
)

Svg为

export const TriangleTrim = () =>
<svg>
<g>
    <polygon className="triangleTrimSt1" points="9,0 9,0.1 4.5,4.6 0,0.1 0,0    "/>
    <polygon className="triangleTrimSt0" points="9,0.1 4.5,4.6 0,0.1 0,1.5 4.5,6 4.5,6 9,1.5    " />
</g>
</svg>

Answer 1

这不是应该怎么做的，如果你使用的是WebPack，你需要为SVG添加文件加载器，那么你可以做到

import TriangleTrim from './TriangleTrim.svg`

const Div = styled.div`
  width: 20px;
  height: 100px;
  background: url(${props => props.background});
`

const App = () => (
  <Div background={TriangleTrim}></Div>
)

这将正确传播此文件的url，您不能在css中将svg的内容指定为background:，除非您有base64数据或使用svg refs。

反应样式化组件无法将符号值转换为字符串

1 个答案: