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属性都具有文字值，但是content可以具有不同类型的值，其中string是其中之一。 https://www.w3.org/wiki/CSS/Properties/content

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

1 个答案: