前回の続きで、MUI（https://mui.com/）を使ってスタイルを設定した。
とりあえず公式のExample Project(https://mui.com/material-ui/getting-started/example-projects/)を見に行く。
やりたいことはデザインを整えることなので、小難しいところは無視してNext.js App Routerの例(https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs)のlayouot.jsを丸パクリする。
Document見る感じ、フォームで使うのはContainer, Box, Typography, TextField, Buttonくらい。
コンポーネント例（https://mui.com/material-ui/all-components/）から使いたいデザインのプロパティを見つけて実装。
ホーム(https://form-app-hazel.vercel.app/)
before
after
Contact form(https://form-app-hazel.vercel.app/form)
before
after
Thanks, Errorも適当に更新した。
感想
予習として30分ほど電車でInstallationを読んだ程度で、実装の時間は4,50分で済んだ。
UIに独自性が求められないのなら、クオリティ高いUIを手軽に使えて素晴らしいと思った。
layout.jsに読み込んだtheme.jsを書き換えれば、ある程度デザインに独自性を持たせることできそう。
仕事でパワポで作ったデザイン渡されて一からHTMLとCSS組んでいくことが何度かあったが、時間がかかる割にわかりやすいデザインにならない。
その点MUIのようなライブラリを使えば、時間短縮＋90点以上のデザインを両立できるのかなと思った。
JSを切るとinputにラベルが表示されたままになるのが少し気になる？
だが、送信まで可能なので一応プログレッシブエンハンスメントは達成できているのか？
テキストフィールドコンポーネントを独自で組めば解消されるとは思うが、いったん満足したのでよし。
今までscss使ったことなかったが、sx propがおそらくscss記法なので勉強したほうがよさそう。
あとメール飛ぶようにしたのでこのブログのナビにContactリンクを張っておいた。
何回かの記事に分けて完成まで5,6時間かけているが、Newtのform app使えばもっと多機能にしたバックエンドを簡単に用意できる。
これくらいなら1時間程度（慣れたらもっと短く）で作成できると思うとすごい。
以上