如何解决“警告：无效的 DOM 属性 `fill-rule`。您的意思是 `fillRule`？”在 Twilio Flex 上答案

【问题标题】：How to resolve "Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`?" on Twilio Flex如何解决“警告：无效的 DOM 属性 `fill-rule`。您的意思是 `fillRule`？”在 Twilio Flex 上
【发布时间】：2019-06-16 06:40:56
【问题描述】：

我刚刚下载了Twilio Flex Sample App，一旦我添加了我的 appConfig 并执行 npm start，我会立即看到几个错误：

警告：无效的 DOM 属性 fill-rule。你是说fillRule吗？
警告：无效的 DOM 属性 stroke-width。你是说strokeWidth吗？
警告：无效的 DOM 属性 stop-color。你是说stopColor吗？
警告：无效的 DOM 属性 stop-opacity。你是说stopOpacity吗？

我该如何解决这些问题？ @twilio/flex-ui 项目不在 github 上发布问题，文档也没有将其作为已知问题提及。

【问题讨论】：

致那些说要编辑 SVG 的人...这个标签存在于 @twilio/flex-ui 项目中。你真的是在建议我编辑 node_modules 文件夹中的代码吗？这似乎是个坏主意……

标签： twilio-flex

【解决方案1】：

发生这种情况是因为 Twilio Flex 示例应用程序是使用 Create React App 构建的，并且 React 希望多字名称采用驼峰式命名。你或许可以使用 Webpack/Babel 配置解决错误

How do I get rid of react error warnings telling me to change svg attributes to camel case?

顺便说一句，当您说这不在 GitHub 上，因为您的链接指向 GitHub 存储库时，我对您的意思感到困惑？

【讨论】：

我指的是@twiliio/flex-ui 项目，而不是我的项目。
我在最新版本的插件生成器上看不到它了。

【解决方案2】：

您必须更改 svg 标签上的类和填充规则属性。它必须是 className 和 fillRule。因为在javascript上使用了camelCase

例子：

<svg width="2em" height="1em" viewBox="0 0 16 16" **className**="bi bi-cart4" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path **fillRule**="evenodd" d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 "/>
</svg>

【讨论】：

【解决方案3】：

我通过更改 SVG 文件中的这些道具来修复它。例如将“stroke-width”转换为“strokeWidth”或将“fill-rule”转换为“fillRule”。

【讨论】：

您更改了 node_modules 文件夹中的填充规则？如果他们推送更新，它不会被覆盖吗？通常，您永远不会更改 node_modules 文件夹中外部库中的代码。
我对这个话题很感兴趣。过几天我就回来！

【解决方案4】：

嘿，我遇到了类似的问题，并找到了以下文章，希望它可以在将来对其他人有所帮助。 How To Use SVG in React 假设您已经使用 create-react-app 创建了项目，然后将 SVG 作为组件导入，create-react-app 的底层自带 SVGR，其他建议请阅读文章。

import {ReactComponent as nameSvgHere} from 'twilio'

它对我有用干杯

【讨论】：