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

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

styled-components javascript

Shubham Gupta · 技术社区 · 7 年前

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

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

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

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

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

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

1 回复 | 直到 7 年前

Avinash 7 年前

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

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

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

推荐文章

Omphile James · 如何将此CSS代码转换为样式化组件?

4 年前

Taylor Austin · 样式化JSX变量不工作

8 年前

visarts · 无法单元测试覆盖材质ui的样式化组件

8 年前

Roy Prins · 彩色标签的样式化组件

8 年前

Strahinja Ajvaz · 对象解构引发错误

8 年前

Jayce444 · React JSS hover函数值

8 年前

James · 使用已设置样式的组件设置材质UI抽屉组件的样式

8 年前

tony_k · 在样式化组件中共享样式的惯用方法?

8 年前

Elcoosp · 生成样式化组件关键帧的函数是否昂贵?

8 年前

JoeTidee · 如何为React动态创建DOM目标。使用样式化组件创建门户?

8 年前