Warning: validateDOMNesting(...): cannot appear as a descendant of . 解決する

Material UIを使用すると、このような警告に遭遇することがよくあります.
コード自体が機能しない重大なエラーではありませんが、コンソールウィンドウにこの警告があふれている場合は、非常に不快です.
最初は大変だったに違いないが、誰かがこの警告をうろうろしているのではないかと心配していたので、私が解決したチラシを残したいと思っていた.

警告文は答えを知っている。

<div> cannot appear as a descendant of <p>

上の文には答えが含まれています.
すなわち、<div>要素は、<p>マーカーのサブマーカーとして機能しない.<p>は行内要素であり、<div>はブロック要素であるため、行内要素にはブロック要素が含まれており、このような警告を発する.Material UIの仕事の中で、想像以上に多くの上記の問題に遭遇しました.

どこが間違ってるの?

どこのコードで<div>が<p>に見つからないかもしれません.
しかし、コンソールにはヒントさえ与えられています.

コンソールウィンドウの警告から、上から下へ、警告が発行されたポイントからほとんどHTMLのトップレベルの要素になるまでの手順がわかります.
上から、at div->at Type graphy(MUIが提供するPタグなので、この部分が原因)->at p.->at Stack -> at CardContent ... など、このように表記します.
中間的に1つの点が切断された場合、CardContentの部分のStackのラベルの中でpのラベルを検索し、pのラベルにTypographyのラベルが書き込まれた部分を追跡することができる.このようにすれば原因を見つけることができる.

警告が表示された場所を実際のコードで表示

<Description>
	{description.map((desc, i) => <Typography key={i} component="div" sx={{ fontSize: '14px' }}>{desc}</Typography>)}
</Description>

...

const Description = styled(Typography)`
  font-size: 14px;
`

警告が発生した部分はこの部分です.<Typography>は、Material UIが提供するpのラベルである.いろいろな面で手軽にカスタマイズできるので人気です.Typographyラベルに14 pxのfont-sizeを繰り返すため、emotionに造形し、Descriptionのラベルを用いた.
しかし<Description>タグのうちTypographyタグを見るとcomponent="div"の属性がある.これはMUIが提供するTypographyラベルであり、基本的にはpラベルであるが、div ellentの属性に変換される.だからDescription(p)の中にTypography(div)があります.

const Description = styled.div`
  font-size: 14px;
`

このDescriptionタグをTypographyから普通のdivに変更しました.Typographyの要素を組み合わせて使う必要はなく、意図的な造形にも十分になります.