为什么 React 让我的 SVG 形状颜色看起来很奇怪？答案

【问题标题】：Why is React making my SVG shape color look weird?为什么 React 让我的 SVG 形状颜色看起来很奇怪？
【发布时间】：2021-01-19 23:29:39
【问题描述】：

我正在使用一些 blob SVG 形状作为我在 react 中制作的登录屏幕，我注意到颜色错误，我直接从 Figma 中导出它们，将它们放在一个文件夹中，然后我只是将它们导入到 react 中。我认为这是由于 chrome 渲染 SVG 文件的方式，但是当我打开它时，它看起来应该是一个 Chrome 选项卡。

左边是 React 的显示方式，右边是 chrome 的显示方式

【问题讨论】：

标签： reactjs google-chrome user-interface svg frontend

【解决方案1】：

这可能是因为 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 中）并选择所有匹配项，然后更改类名

【讨论】：