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

Question

我刚刚下载了Twilio Flex 示例应用程序，一旦我添加了我的 appConfig 并执行了 npm start，我立即看到了几个错误：

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

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

Answer 1

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

Answer 2

发生这种情况是因为 Twilio Flex 示例应用程序是使用 Create React App 构建的，而 React 希望多词名称采用驼峰式大小写。您也许可以使用 Webpack/Babel 配置来解决错误

如何摆脱告诉我将 svg 属性更改为驼峰式大小写的反应错误警告？

顺便说一句，当你说这不在 GitHub 上，因为你的链接指向 GitHub 存储库时，我很困惑你的意思是什么？