为什么Reaction会让我的SVG形状颜色看起来很奇怪? [英] Why is React making my SVG shape color look weird?

查看:9
本文介绍了为什么Reaction会让我的SVG形状颜色看起来很奇怪?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用一些斑点SVG形状在Reaction中制作登录屏幕,我注意到颜色不正确,我直接从Figma导出它们,将它们放在文件夹中,然后将它们导入Reaction中。我以为这是因为Chrome呈现SVG文件的方式,但当我打开一个Chrome选项卡时,它看起来应该是这样的。

左侧是Reaction如何显示它,右侧是Chrome如何显示它

svg

可能是因为推荐答案样式类。当您导出SVG文件时,它们将获得默认的类名&st0";、";st1";等。如果在同一页面中有多个SVG文件作为组件,则可以更改SVG文件中的每个类名

在代码编辑器中打开SVG时,它们看起来如下所示

<style type="text/css">
    .st0{fill:#121224;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#F89CFF;}
    .st3{fill:#1E5474;}
    .st4{fill:none;}
    .st5{fill:none;stroke:#1E5474;stroke-miterlimit:10;}
    .st6{fill:none;stroke:#F89CFF;stroke-miterlimit:10;}
    .st7{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}
    .st8{stroke:#1E5474;stroke-width:0.6087;stroke-miterlimit:10;}
</style>

要更改每个类,您可以选择其中一个类的名称,然后按Ctrl+Shift+L(在vscode中)并选择所有匹配项,然后更改类名

这篇关于为什么Reaction会让我的SVG形状颜色看起来很奇怪?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆