不支持八位字节文字的样式化组件

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

不支持八位字节文字的样式化组件

Styled components not supporting octet literals

javascript

styled-components