Question

在使用样式组件3.3.2从react-boilerplate派生的应用程序中，我试图在伪类中显示SVG，如下所示：

import arrowDown from 'images/ico-arrow-down.svg'
import arrowUp from 'images/ico-arrow-up.svg'

const Tab = styled.div`
  &:after {
    content: url("${arrowUp}");
    position: relative;
  }
  &.active:after {
    content: url("${arrowDown}");
  }
`;

但是，第一次使用content: url("${...}")会破坏该块中所有以下样式定义。

在这种情况下，&.active:after样式将被忽略，而position: relative定义中的&:after将被解析。

SVG的格式正确，并且确实经过url编码。但是，经过大量测试，SVG中破坏样式的部分似乎是transform="translate(...)"属性中的括号，该属性不会进行url编码。应该是吗？

如果我在后台定义中分配SVG而不是伪类内容，那么一切都会按预期进行，因此，一般设置似乎没有问题。

这是一个错误吗？如果是，在哪里？我该如何解决（除了在后台使用SVG）？我可以绕过数据解析并以某种方式简单地插入SVG文件URL（作为Webpack / React新手）吗？

react + styled-components：伪类中断样式中的内联数据SVG

0 个答案: