2020-01-19(Sun)追記: 昨年 11 月に MDC-React is no longer under active development と宣言されていました。アップデートされないと思ったらそういうことだったのか……
working-time-aroundでは UI ライブラリとしてMaterial Component for React(MDC React)を採用しました。バージョンは v0.15 とまだメジャーバージョンはリリースされていませんが、ベースとなるMaterial Component for the Webが今年二月に v1.0.0 リリース後 v3.2.0 まで順調に版を重ねているので問題なかろうと判断してのこと。しかしこれはちょっと時期尚早で、まだまだ気軽に使うというわけにはいきませんでした。以下覚え書き。
- まず準備の話。TypeScript で利用する際は
compilerOptionsに"esModuleInterop": trueが必要でした。これがないとTop App Barなどでコンストラクタがない旨のエラーが出ます。ボイラープレート使う人には関係ない話だと思いますが、念のため。 - React Layout Gridフォントが指定されていません。デフォルトのフォントが Serif 系に設定されているブラウザだと(Safari 系がそう)見栄えがそろいません。
- React Buttonは
iconプロパティでアイコンが指定できるようになっているのですが、指定するとアイコンを囲むサークルの上下が切れます(Gridと組みあわせたとき固有の現象かも) - React Top App Barの
TopAppBarIconに指定したMaterialIconでhasRippleプロパティをtrueにしたとき、アニメーションが完了しません(最後のフレームの描画が残り続ける)。 - React Floating Action Buttonは Safari で下線が描画されます(
a要素のマークアップにレンダリングされた結果) - React Selectは私の試した範囲では使いものになりませんでした。いちばんプレーンに設定しても
onChangeイベントハンドラに変更前の値が渡されるのでどうにもなりません(macOS や iOS、iPadOS のことを考えなければOptionコンポーネントにonClickイベントハンドラを設定することで回避できなくもないのですが、optionを OS 標準の UI コントロールに置き換える macOS や iOS、iPadOS のブラウザで動かなくなります) - ドキュメントに誤りが散見されます。React Selectの CSS 指定のところなんかかなりがたがた。
……とまあいくつかコンポーネント使っただけでこのありさま。Select の例から推察するにそもそも挙動がまだ正しくないようなので、マテリアルデザインのコンポーネントは他にもありますし、メジャーバージョンがリリースされてからあらためて採用を検討してもよいのではないかと思います。
以上、参考になりましたら幸いです。