Material Components for the Webの使い方

MDC-Webの使い方は非常に簡単です。
下記の手順で準備を行います。

1. ライブラリのインストール

まずはnpmからインストールを行います。
npmを立ち上げ、下記のコマンドを実行します。

npm install --save material-components-web

npmの使い方については、下記の記事が参考になります。

参考：
知っておいて損はなし！新人Webデザイナーのための「npm」入門｜ferret フェレット

2. スタイルシートを読み込む

続いて、headタグ内に下記のようにMDC-Webのスタイルシートを読み込みます。

<html class="mdc-typography">
<head>
<title>Material Components for the web</title>
<link rel="stylesheet"
      href="node_modules/material-components-web/dist/material-components-web.css">
</head>

また、urlを直接読み込む場合には、下記を利用します。

https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css

3. コンポーネントを追加

bodyタグ内にコンポーネントを加えていきます。

<body>
<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input type="text" class="mdc-textfield__input" id="demo-input">
<label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
</div>
</body>

Bootstrapを利用するときと同じように、要素そのものではなくCSSのクラスに依存してDOMをレンダリングしています。

4. スクリプトを読み込んで実行

次に、スクリプトを読み込みます。
スクリプトは、bodyタグの閉じタグの直前に置くのがよいとされています。

<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>

5. テーマの色を変える

場合によっては、テーマの色を変えることもできます。
最も簡単な方法は、CSS Variables(カスタムプロパティ)を使う方法です。

<style>
:root {
　　--mdc-theme-primary: #0e4ead;
　　—mdc-theme-secondary: #0060e6;
}
</style>