代码之家 › 专栏 › 技术社区 › Shubham Gupta

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

styled-components javascript

Shubham Gupta · 技术社区 · 6 年前

下面的代码似乎不能与样式化组件一起工作

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

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

在那里,好像它被改为跟随,它工作得非常好。

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

有没有人遇到过类似的问题,并解决了这个问题。

1 回复 | 直到 6 年前

Avinash 6 年前

样式化组件按原样转换模板字符串中的文本。如果仔细观察,内容css属性将作为字符串提供。所以模板字符串也应该有引号,样式化组件在生成css时不会添加引号。像这样的

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

虽然所有其他css属性都有文字值,但内容可以有不同类型的值,字符串就是其中之一。 https://www.w3.org/wiki/CSS/Properties/content

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前