【Angular Material15】LegacyModuleのチェックボックスを使おう！

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はAngular MaterialのLegacyチェックボックスのCSSを上書きする方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

Angular MaterialのLegacyModuleのCSSを上書きできる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

実行環境

今回の記事はMaterial15が対象だよ！

Angular Material

UI component infrastructure and Material Design components for Angular web applications.

実行環境

AngularMaterialのLegacyModuleのCSSを上書きしよう！
実際に動かしてみよう！
GitHubのサンプルコード
まとめ

AngularMaterialのLegacyModuleのCSSを上書きしよう！

LegacyModuleとは

import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';

このように記述することで、Angularとしては非推奨ですが
古いバージョンのmaterialモジュールを使用することができます。

あえて古いバージョンを使う必要はないのですが、
最新バージョンは現状バグが多いので回避策として使用するケースがあります。

CSS設定を上書きしないとまともに動かないものが多いよ！

Angular MaterialのCSSを上書きする構文

Angular MaterialのCSSを”部分的に”上書きするには
以下のように記述する必要があります。

:host ::ng-deep {
  /* 変更したいスタイル */
}

これは公式サイトにも記述がある通り現在は非推奨となっていますが、
現状これ以外に部分的に上書きする手段が無いため、その前提で紹介します。

Legacyチェックボックスを上書きする構文

:host ::ng-deep {
  // 文字色
  .mat-checkbox-label {
    // ボタン間のマージン
    margin-right: 3rem;
    color: aqua;
  }
  // チェックボックスを非表示に
  .mat-checkbox-checkmark {
    display: none;
  }
  // 未チェック時の枠の色
  .mat-checkbox-frame {
    border-color: aqua;
  }

  // チェックドの色
  .mat-checkbox-checked .mat-checkbox-background {
    background-color: red;
  }

  // ■ disabledの設定
  .mat-checkbox-disabled {
    // disabledの文字色
    .mat-checkbox-label {
      color: darkgray;
    }
    // disabled且つ未チェックの色
    .mat-checkbox-frame {
      border-color: darkgray;
    }
    // disabled且つチェックドの色
    &.mat-checkbox-checked {
      .mat-checkbox-background {
        background-color: darkgray;
      }
    }
  }
}

説明が難しいですが、AngularMaterialを使うと
通常はCSSがカプセル化されて上書きできない様になっているのですが
デベロッパーツールを使うと、クラス名が特定できるので、
それらを指定してスタイルを上書きしています。

色は好きなものを設定してね！

ng-deepで上書きする際の注意点※超重要

先程の構文をそのまま使用してしまうと、
画面に表示されているすべてのコンポーネントの
スタイルが上書きされてしまいます。

これを回避するためには、以下のように
クラス名やIDを指定してスタイルを適用することを強く推奨します。

:host ::ng-deep {
  クラス名/ID名 {
  　.mat-checkbox-label {
    　　// 省略
    }
  }
}

実際に動かしてみよう！

【Angular15】Angular,CLI,Materialのバージョンアップをしよう！

バージョンが重要なので、15未満のバージョンを使っている場合はアップデートしてね！

初期設定

アプリケーションの作成

ng new 好きなディレクトリ名
cd 作成したディレクトリ

Materialのインポート

ng add @angular/material

テーマカラーとアニメーションは好きな項目を選択してね！

app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// 非推奨なのでエディタによっては斜線が付きます。
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

エディタによっては斜線がつくけど動かせるよ！

app.component.html

<section>
  <div class="">
    <p>デフォルトのチェックボックス</p>
    <p>オリジナルのチェックボックス</p>
    <mat-checkbox checked>チェックド</mat-checkbox>
    <mat-checkbox>未チェック</mat-checkbox>
    <mat-checkbox checked disabled>disabled且つチェックド</mat-checkbox>
    <mat-checkbox disabled>disabled且つ未チェック</mat-checkbox>
  </div>
  <br />

  <div id="checkbox-wrap">
    <p>オリジナルのチェックボックス</p>
    <mat-checkbox checked>チェックド</mat-checkbox>
    <mat-checkbox>未チェック</mat-checkbox>
    <mat-checkbox checked disabled>disabled且つチェックド</mat-checkbox>
    <mat-checkbox disabled>disabled且つ未チェック</mat-checkbox>
  </div>
</section>

app.component.scss

// チェックボックス
:host ::ng-deep {
  #checkbox-wrap {
    // 文字色
    .mat-checkbox-label {
      // ボタン間のマージン
      margin-right: 3rem;
      color: aqua;
    }
    // チェックボックスを非表示に
    .mat-checkbox-checkmark {
      display: none;
    }
    // 未チェック時の枠の色
    .mat-checkbox-frame {
      border-color: aqua;
    }

    // チェックドの色
    .mat-checkbox-checked .mat-checkbox-background {
      background-color: red;
    }

    // ■ disabledの設定
    .mat-checkbox-disabled {
      // disabledの文字色
      .mat-checkbox-label {
        color: darkgray;
      }
      // disabled且つ未チェックの色
      .mat-checkbox-frame {
        border-color: darkgray;
      }
      // disabled且つチェックドの色
      &.mat-checkbox-checked {
        .mat-checkbox-background {
          background-color: darkgray;
        }
      }
    }
  }
}

動作確認

ng serve -o

これで同じものが出来上がるはずです。

デフォルトのものはそもそもまともに動かないよ！

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
使いたい人は是非ダウンロードしてみてください。

GitHub - same-hack/Angular_Material15_Legacy

Contribute to same-hack/Angular_Material15_Legacy development by creating an account on GitHub.

まとめ

非推奨だが、古いバージョンのmaterialモジュールの使用が可能
Materialの上書きにはng-deepを使用する
公式的には非推奨となった方法だが、代替手段は現状ない

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram