導入
M
M.AutoInit();
JSの操作はMというオブジェクトを使って行う。このMはグローバル変数として定義されていて、その証拠にブラウザの開発用コンソールからアクセスできる。つまり一つのスクリプトファイル内で
import "materialize-css/dist/js/materialize"
されていれば、他のコンポーネント等で再度importする必要がない。というよりしてはいけない。Mを使った操作を行うと無駄に処理が行われてしまう。
例えば.waves-*を使ってボタンを押す度にエフェクトを出すようにすると、エフェクトがそのまま残り続けたりする。
import
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";
のようにすると上書きされる。
utilites
Materializeはutilitesがあまり充実していない。htmlのclassだけでレイアウトを整えるにはBootstrapを部分的に使うとよい。
コンパイル済みのbootstrap-grid.css, bootstrap-reboot.css, bootstrap-utilities.cssを読み込ませる。bootstrap-gridはMaterializeと設定が重複するので使いたい方を後に読み込ませる。