react + 样式化组件:伪类分隔符样式中的内联数据 SVG

Question

在使用样式化组件 3.3.2 从 react-样板派生的应用程序中，我正在尝试在伪类中显示 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样式将被忽略，而&:after定义中的position: relative将被分析。

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

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

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

Answer 1

const Tab = styled.div`
&::after {
content: url("images/ico-arrow-up.svg");
position: relative;
}
&.active::after {
content: url("images/ico-arrow-down.svg");
}
`;