Reaction + styled-components: встроенные данные SVG в стиле псевдоклассных разрывов - PullRequest
Новая
       12

Reaction + styled-components: встроенные данные SVG в стиле псевдоклассных разрывов

0 голосов
/ 01 сентября 2018

В приложении, полученном из реактивного шаблона с использованием styled-компонентов 3.3.2 Я пытаюсь отобразить 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 в фонах)? Могу ли я обойти данные и как-то просто вставить URL файла SVG (спрашивая как новичок в Webpack / React)?

...