【React】React does not recognize the `textPrimary` prop on a DOM element.の対処方法

症状

ReactでMaterialUIのAppbarを使用したとき、以下のwarnが発生しました。 翻訳すると、「ReactはDOM要素の `textPrimary`プロップを認識しません。意図的にカスタム属性としてDOMに表示する場合は、代わりに小文字の `textprimary`と入力してください。親コンポーネントから誤って渡した場合は、DOM要素から削除してください。」でした。

warm

Warning: React does not recognize the `textPrimary` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `textprimary` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

エラーをたどって、warnが発生している箇所を発見。抜粋しました。

Appbar.js

<Typography className={classes.title} variant="h5" noWrap textPrimary={"#000"}>
  {HOME_TEXT.HOME_TITLE}
</Typography>

解決策

エラーの指示に従ってtextPrimaryをすべて小文字にしたら、解決しました。

Appbar.js

<Typography className={classes.title} variant="h5" noWrap textprimary={"#000"}>
  {HOME_TEXT.HOME_TITLE}
</Typography>

参考