如何在 Twilio Flex 上解决"Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`?"

Question

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

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

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

Answer 1

我通过更改 SVG 文件中的那些道具来修复它。 例如，将"笔触宽度"改为"笔触宽度"或将"填充规则"改为"填充规则"。

Answer 2

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

例：

<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>

Answer 3

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

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

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

Answer 4

嘿，

我遇到了类似的问题，并找到了以下文章，希望将来可以帮助其他人。如何在 React 中使用 SVG假设您已经使用create-react-app创建了项目，然后将SVG作为组件导入，create-react-app附带SVGR，有关其他建议，请阅读本文。

import {ReactComponent as nameSvgHere} from 'twilio'

它对我有用干杯

Answer 5

如果您使用的是vs-code，则转到左侧顶部的搜索栏（放大镜标志），垂直第二位置。

警告：无效的 DOM 属性填充规则。你是说填充规则吗？

1. 填充规则（将其放在搜索框中）2.填充规则（将其放在替换框上，然后按此框右侧的方形符号）

3 .它将被替换

Answer 6

好吧，就我而言，我意识到我的几个转换为组件的 SVG 在相同的 SVG 填充规则、笔触宽度标签和更多属性中都有浏览器抛出错误，只需删除每个属性的行并给了他一个驼峰写，也就是说第一个词以 minuscula 开头，其他单词以市长开头， 好吧，类似的东西，我希望它为某人服务:)代码截图

Answer 7

来到这里是因为我在 JSX 中在 react 组件中使用的 SVG 上遇到了这个问题，我的答案可能与您的问题无关，但对于其他任何来这里遇到像我这样的问题的人。

我通过将 svg 中的 html 属性从"填充规则"、"笔触宽度"和"笔触线帽"

更改为"填充规则"、"笔画宽度"和"笔画线帽"来修复它，如警告所示。

换句话说，我将 SVG 的 html 属性从烤肉串大小写更改为驼峰大小写