material-uiのTextFieldをカスタマイズして行幅を広げる方法

はじめに

TextFieldを使って入力フォームを作る際に、自己紹介文の入力フォームのみ行幅を広げたいと考えました。
行幅を広げるために調べたことを備忘録として残そうと思います。

環境

react 18.0.0
material-ui 4.12.4

TextFieldのデフォルト幅

TextFieldを下記のように記述すると画像のようにフォームが作成されます。

import React, { useContext } from "react"
import TextField from "@material-ui/core/TextField";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";

~~~省略~~~

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <TextField
        required
        id="outlined-required"
        label="名前"
        variant="outlined"
      />
      <TextField
        required
        id="outlined-required"
        label="自己紹介文"
        variant="outlined"
      />
    </form>
  )
}

名前のフォームの幅はこれで問題ないのですが、自己紹介文はどう考えてもこの幅だと使いづらいはず。
どうやったら行幅を広げられるか調べました。

参考にしたのはmaterial-uiの公式ドキュメントです。
(5系のバージョンを使っている場合は、公式ドキュメントの左上からバージョンを変更する必要あり。)

行幅を広げる方法

調べたら簡単でした。
行幅を変更したいフォームに下記のpropsを追加するだけです。

  multiline //=>行幅を変更する記述を有効にするために必要
  minRows="行幅を数字で指定"//=>行幅の最小を指定できる。multilineの記述がないと反映されない

先ほどの記述で使用するとこのようになります。
今回は行幅の最小を10に指定しました。

import React, { useContext } from "react"
import TextField from "@material-ui/core/TextField";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";

~~~省略~~~

    return (
    <form className={classes.root} noValidate autoComplete="off">
      <TextField
        required
        id="outlined-required"
        label="名前"
        variant="outlined"
      />
      <TextField
        required
        multiline
        minRows="10"
        id="outlined-required"
        label="自己紹介文"
        variant="outlined"
      />
    </form>
  )
}

いい感じに行幅を広げられました！
あとはフォームを横並びではなく縦で並ばせたいので後で調整します。
公式ドキュメントを読めば色々とカスタマイズできるので、ぜひ調べてみてください。