Typography が枠内に収まらない
<Typography component='p'>{message}</Typography>
propsとして component='p'を渡してパラグラフ要素して使用。
動作の確認で下記の左側のように'aaaa'のように入力していたため、枠に収まらない理由がわからなかった...
しかし、日本語や'Hello world'のようにちゃんと文字を入力すれば普通に改行してくれて、枠内に収まってくれた...(勉強不足)
すべての文字を表示したくない場合 nowrap を使う
<Typography nowrap component='p'>{message}</Typography>
nowrapを使うと 文字列の最後に'...'と表示できる。
しかも枠の大きさに合わせて'...'を表示してくれるので使い勝手はよさそう。
*ただ、文字数を指定しないと下記の写真のように1行のみしか表示されないので注意が必要。