Стилизованные компоненты, не поддерживающие литералы октетов

Question

Следующий фрагмент кода не работает со стилевыми компонентами

const currencyMap = {
    inr: ' \\20B9 ',
};

export const CurrencyIcon = styled.span`
    &:after {
        content: ${props => currencyMap[props.currency]};
    }
`;

где, как если бы оно было изменено на следующее, оно прекрасно работает.

export const CurrencyIcon = styled.span`
    &:after {
        content: ' \\20B9 ';
    }
`;

Кто-нибудь сталкивался с подобной проблемой и имеет обходной путь этой проблемы.

Answer 1

styled-component преобразует текст внутри строки шаблона как есть.Если вы внимательно посмотрите, свойство content css предоставляется в виде строки.Таким образом, в строке шаблона также должны быть кавычки, styled-component не будет добавлять кавычки при генерации CSS.Примерно так

export const CurrencyIcon = styled.span`
    &:after {
        content: '${props => currencyMap[props.currency]}';
    }
`;

В то время как все другие свойства CSS имеют литеральные значения, содержимое может иметь разные типы значений, одним из которых является строка.https://www.w3.org/wiki/CSS/Properties/content