React使用Material UI Tabs时出现无法识别textColor属性警告问题咨询

问题根因 #

该警告触发的原因是React检测到你给原生DOM元素传递了非HTML标准的textColor属性，由于原生DOM不识别该自定义属性，因此抛出警告。功能可以正常运行是因为Material UI的Tabs组件内部已经正确消费了这个属性，只是存在额外的属性透传逻辑将该属性传到了底层DOM节点上。

解决方案 #

按照以下优先级排查即可解决：

• 修正导入路径和包名拼写：你当前的导入语句存在两处错误，一是包名拼写错误，正确的Material UI v4包名为@material-ui/core而非@material-ui-core，二是不需要从dist子目录导入组件，直接从包根路径导入即可，修改后的导入语句如下：

import { ImageWithFallback, Paper, Tabs, Tab, Typography, Tooltip } from '@material-ui/core';

• 确认你安装的依赖包正确：如果修改导入后仍有报错，检查你的package.json，确认安装的是官方的@material-ui/core包，而非名字相似的第三方非官方包。
• 如果你是自定义封装了Tabs组件，检查封装逻辑中是否存在将所有props直接透传给原生DOM节点的写法（比如直接将{...props}传给div等原生标签），需要过滤掉textColor这类组件自定义属性后再透传原生属性即可。

内容的提问来源于stack exchange，提问作者Sameer Huilgolkar