Material Design のチュートリアルでエラー回避

Material DesignのWeb版チュートリアルを使用して試していたところ何度かエラーが出るところがありました。

チュートリアル内では通常にできているし、それにならって作成したコードにも間違いがなさそうなのにエラーが出るということがあります。

英語のフォーラム内でしか情報がなかったので、その解決法について触れておきます。

エラーの大半は現在のバージョンとチュートリアルのバージョンが違うことにあります。

npmでインストールしたものが新しく、マークアップや使用方法が違うためにエラーになります。

MDC-103

MDC-103での３ページ目です。

ナビにリップルを使用するために以下を記入します。

@import "@material/ripple/mixins";

おそらくこれを記入するとエラーが出てくるのではないかと思います。

なので以下のように直します。

@import "@material/ripple/mdc-ripple";

これで問題なく動作するはずです。

MDC-111　

次にMDC-111のエラーです。

４ページ目のセレクトボックスをリッチにする際にエラーが発生します。

エラーの中身はセレクトの使い方が違うよと出ています。正確にはあるマークアップが存在していないというエラーです。

チュートリアルではセレクトオプションで実装していますが、新しいバージョンではそのような構成ではなく、<ul><li>で作成し、クラス名の付け方も少々変わってきます。

selectのようなドロップダウンボックスを使用したい場合はgithubページを参考に使用してみてください。

ボックスの種類は４種類あり、「Filled」「Outlined」「Shaped Filled」「Shaped Outlined」の4種類です。

それぞれに対応した構成がgithubページに書かれています。

それぞれどのような形かはDemoページに一覧で確認することができます。

さいごに

エラーで出た内容をそのまま検索入れると大体英語のフォーラムのページが出てきます。

それらをざっと見てみると上の方には

「私もそのエラー出ました」

のような意見が多くあります。

下の方に行くと解決策や最終的な回答がありますので、そこを参考にしてください。

類似トピックがすでに立っている際にはそちらのトピックに飛ぶ可能性もあります。