Material UIのTypographyを使うとエラー「

cannot appear as a descendant of

」が出た

ReactでMaterial UIを導入して開発をしていたら、<div> cannot appear as a descendant of <p>というエラーが出た。

このエラーは、<div>タグを<p>タグで囲っていると発生するのだが、心当たりがない。

調べた結果

どうやら、Material UIの<Typography>でpタグを使っているようで、これが今回のエラーを引き起こしているようであった。

対応

以下のように、componentにspanを渡して、<p>タグから<span>タグにする対応をした。

<Typography variant="body2" component="span">