みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回はAngular MaterialのLegacyチェックボックスのCSSを上書きする方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
- Angular MaterialのLegacyModuleのCSSを上書きできる
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
実行環境


AngularMaterialのLegacyModuleのCSSを上書きしよう!
LegacyModuleとは
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
このように記述することで、Angularとしては非推奨ですが
古いバージョンのmaterialモジュールを使用することができます。
あえて古いバージョンを使う必要はないのですが、
最新バージョンは現状バグが多いので回避策として使用するケースがあります。
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 {
// 省略
}
}
}
実際に動かしてみよう!

初期設定
アプリケーションの作成
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にあげているので
使いたい人は是非ダウンロードしてみてください。
まとめ

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

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