13

我刚刚下载了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 上发布问题，文档也没有提到它是一个已知问题。

4

4 回答 4

11

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

于 2020-12-14T12:14:32.650 回答
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>
于 2020-11-25T02:13:29.403 回答
1

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

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

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

于 2019-06-06T15:55:53.063 回答
0

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

import {ReactComponent as nameSvgHere} from 'twilio'

它对我有用，干杯

于 2021-03-29T20:17:39.933 回答