Material UI を使った開発で困ることと言えば、TextField の見た目ですよね？

　　 (Material UI 公式サイト のスクリーンショット)

Material Design のガイドラインには準拠しているようですが、左上に縮こまったラベルはサイズが小さすぎて、日本語環境においては不便極まりなく、一般的にもあまりウケがよくないデザインだと思います。

動かない、読めるサイズのラベル・普通の枠線付きの入力エリア、これらが普通に縦に並んでいる入力フィールドが欲しいですよね？

Material UI のテーマ機能を使えば、TextField の各パーツの見た目をカスタマイズして、ラベルが動かない普通の見た目にできます。

これで MUI Base や Joy UI をプロジェクトに導入するまでの間をしのぎましょう。

実は、現在 Alpha 版の MUI Base (@mui/base) を使えば、スタイル抜きの入力フォームを使って見た目を自由自在にカスタマイズすることが出来ます。

また、現在開発が進められている Material UI の姉妹ライブラリである Joy UI (@mui/joy) には、ズバリ、マトモな見た目の TextField が含まれています。

(Joy UI 公式 のスクリーンショット)

今回は MUI のテーマ機能を使って、TextField のスタイルを直接上書きしてしまいます。

▼ この記事の3番の方法になります。

他にも、TextField をラップしたコンポーネントを自作してそちらを使う方法もありますが、forwardRef, className, sx, controlled/uncontrolled の管理などを怠ると、各利用箇所(例：横幅を調整する、refから操作する)で問題が出て、対処が後手に回ることになると思うので、この方法を取りました。

（あと、フォーカスすると青くなったり、エラーだと赤くなったりする挙動は継承したい、要はラクしたいというのもあります。）

（同じ理由で、'@mui/material/styles' から利用可能な styled() も良い選択肢だと思います。）

まずは、

と記述したときに、上図のようなスタイルが得られるテーマの記述を挙げて、その後ろに解説を続けます。

デフォルトで display: inline-flex で、そこは上書きしていないので、フィールドを縦に並べたい場合には flex に変えましょう。

createTheme は、同名の関数が他のパッケージにもあるので、 "@mui/material" からインポートするように要注意！！

コメントアウトされている、typography.subtitle2 という形の指定には「テーマの Composition」という手法を用います。 公式ドキュメント の "Theme composition: using theme options to define other options" の項目に詳しく書かれています。

テーマ機能を使ったコンポーネントのカスタマイズは、 components > Mui(コンポーネント名) > styleOverrides > (CSS ルール) > {スタイルの記述} のような階層構造で記述します。

「なんで TextField じゃないの？ InputLabel, OutlinedInput, FormHelperText って何？」

とお思いと思います。

まず、 TextField インプットは、それ自体に何らかのスタイルが当てられているコンポーネントではありません。 次の複数の組み合わされたコンポーネントによって構成された Compound Component (複合的コンポーネント) です。

ドキュメントの下記の章に、それらのコンポーネントについて軽く説明されています。

ところで、それぞれのコンポーネントについて、root, notchedInput のような「CSSルール」に対してスタイルが当てられているのですが、この「CSSルール」とは何なのでしょうか？

MUI のドキュメントには、Component のドキュメントと、APIのドキュメントとがあり、 Component のドキュメントの末尾には API という章が立てられて、複数のコンポーネントのAPIへのリンクが書かれています。

例： TextField コンポーネントの "API" 章

そして、それぞれのAPIページにある "CSS" の章を参照してみましょう。 例： OutlinedInput の "CSS" の章

"Rule name" のカラムに書かれているのが、今回の「テーマによるカスタマイズ」に使われている CSSルール名になります。 (それぞれの説明はDescription に書かれている英文を見れば何となく分かりますよね？)

最後は作業です。根性です。

DevTools を使って実際の要素に当てられたスタイルを確認しつつ、テーマの CSS を上書きしていきましょう。 スタイルの確認には実際の class 名が必要ですが、これには CSS の表の Global class のカラムの文字列が相当します。