[React] MUI TextFieldで文字列を入力すると動的に高さを変動させる方法

初めに

MUIを使ってフォームを作成している際に躓いたので、ここで備忘録として記事を残しておきたいと思います

結論

TextFieldコンポーネントのmutiline属性をつけるだけ！

retutn(
    <>
        <TextField mutiline />
    </>
)

参考文献: 一部抜粋

The multiline prop transforms the text field into a TextareaAutosize element. Unless the rows prop is set, the height of the text field dynamically matches its content (using TextareaAutosize). You can use the minRows and maxRows props to bound it.

multilineプロップは、テキストフィールドをTextareaAutosize要素に変換します。rowsプロップが設定されない限り、テキストフィールドの高さは動的に（TextareaAutosizeを使用して）そのコンテンツに一致します。minRowsプロップとmaxRowsプロップを使って、それを束縛することができます。

参考文献

https://mui.com/material-ui/react-text-field/#multiline
https://mui.com/base-ui/react-textarea-autosize/