導入

M

M.AutoInit();

JSの操作はMというオブジェクトを使って行う。このMはグローバル変数として定義されていて、その証拠にブラウザの開発用コンソールからアクセスできる。つまり一つのスクリプトファイル内で

import "materialize-css/dist/js/materialize"

されていれば、他のコンポーネント等で再度importする必要がない。というよりしてはいけない。Mを使った操作を行うと無駄に処理が行われてしまう。
例えば.waves-*を使ってボタンを押す度にエフェクトを出すようにすると、エフェクトがそのまま残り続けたりする。

webpackなどを使用していて、エントリー用のJSに

import "materialize-css"

のようにしてしまうと、materialize.cssが別に読み込まれてcssをオーバライドできなくなる。JS単体はdistディレクトリ内のJSから読み込む。

Materializeの設定は~materialize-css/sass/components/_variables.scssで設定されている。ここで書かれている変数は全て!defaultフラグ付きでグローバル変数として定義されているので、エントリー用のscssファイルに

$primary-color: black; // e.g.
@import "materialize-css/sass/materialize.scss";

のようにすると上書きされる。

Materializeはutilitesがあまり充実していない。htmlのclassだけでレイアウトを整えるにはBootstrapを部分的に使うとよい。

コンパイル済みのbootstrap-grid.css, bootstrap-reboot.css, bootstrap-utilities.cssを読み込ませる。bootstrap-gridはMaterializeと設定が重複するので使いたい方を後に読み込ませる。