Question

我刚刚下载了Twilio Flex Sample App，一旦添加了appConfig并启动了npm，我立即会看到一些错误：

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

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

Answer 1

之所以发生这种情况，是因为Twilio Flex Sample App是使用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存储库？

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

Answer 3

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

Answer 4

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

import {ReactComponent as nameSvgHere} from 'twilio'

它对我有用干杯

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

4 个答案: