Angular 5 & MaterialでSnackBarの背景色を自由自在に変更！ 2つの基本と応用4つの方法を徹底解説

2024-06-13

Angular 5とMaterialでSnackBarコンポーネントの背景色を変更する方法

方法1：CSSを使用する

SnackBarコンポーネントにカスタムCSSクラスを適用します。
適用したCSSクラスで、background-colorプロパティを使用して背景色を設定します。

例：

<button (click)="openSnackBar()">開く</button>

<ng-template #snackbarTemplate>
  This is a snackbar!
</ng-template>

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  openSnackBar() {
    this._snackBar.open('This is a snackbar!', 'Action', {
      duration: 2000,
      panelClass: 'custom-snack-bar'
    });
  }
}

.custom-snack-bar {
  background-color: #f44336; /* 赤色に変更 */
}

方法2：MatSnackBarConfigを使用する

MatSnackBarConfigオブジェクトを作成します。
panelClassプロパティに、SnackBarコンポーネントに適用するCSSクラス名を指定します。
MatSnackBarサービスのopen()メソッドに、作成したMatSnackBarConfigオブジェクトを渡します。

<button (click)="openSnackBar()">開く</button>

<ng-template #snackbarTemplate>
  This is a snackbar!
</ng-template>

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  openSnackBar() {
    const config = new MatSnackBarConfig();
    config.panelClass = 'custom-snack-bar';
    this._snackBar.open('This is a snackbar!', 'Action', config);
  }
}

.custom-snack-bar {
  background-color: #f44336; /* 赤色に変更 */
}

補足

上記の方法は、Angular 5とMaterial Design 5以降で使用できます。
SnackBarコンポーネントの他のスタイルを変更するには、同様の方法を使用できます。

Angular 5とMaterialでSnackBarコンポーネントの背景色を変更するサンプルコード

<button (click)="openSnackBar()">開く</button>

<ng-template #snackbarTemplate>
  This is a snackbar!
</ng-template>

.custom-snack-bar {
  background-color: #f44336; /* 赤色に変更 */
}

// snackbar.component.ts
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-snackbar',
  templateUrl: './snackbar.component.html',
  styleUrls: ['./snackbar.component.css']
})
export class SnackbarComponent {
  constructor(private _snackBar: MatSnackBar) {}

  openSnackBar() {
    this._snackBar.open('This is a snackbar!', 'Action', {
      duration: 2000,
      panelClass: 'custom-snack-bar'
    });
  }
}

<button (click)="openSnackBar()">開く</button>

<ng-template #snackbarTemplate>
  This is a snackbar!
</ng-template>

// snackbar.component.ts
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-snackbar',
  templateUrl: './snackbar.component.html'
})
export class SnackbarComponent {
  constructor(private _snackBar: MatSnackBar) {}

  openSnackBar() {
    const config = new MatSnackBarConfig();
    config.panelClass = 'custom-snack-bar';
    this._snackBar.open('This is a snackbar!', 'Action', config);
  }
}

/* snackbar.component.css */
.custom-snack-bar {
  background-color: #f44336; /* 赤色に変更 */
}

説明

snackbar.component.htmlファイルは、SnackBarコンポーネントのテンプレートを定義します。
openSnackBar()メソッドは、SnackBarコンポーネントを開きます。
custom-snack-bar CSSクラスは、SnackBarコンポーネントの背景色を赤に変更します。

このサンプルコードは、基本的な例です。必要に応じて、自由にカスタマイズしてください。

Angular 5とMaterialでSnackBarコンポーネントの背景色を変更するその他の方法

アプリケーション全体のスタイルを定義するCSSファイルで、SnackBarコンポーネントの背景色を指定することができます。この方法は、すべてのSnackBarコンポーネントに同じ背景色を適用したい場合に有効です。

/* styles.css */
.mat-snack-bar-container {
  background-color: #f44336; /* 赤色に変更 */
}

方法4：encapsulationプロパティを使用する

MatSnackBarConfigオブジェクトのencapsulationプロパティを使用して、SnackBarコンポーネントのCSSカプセル化を無効にすることができます。これにより、グローバルCSSでSnackBarコンポーネントのスタイルを上書きすることができます。

const config = new MatSnackBarConfig();
config.panelClass = 'custom-snack-bar';
config.encapsulation = ViewEncapsulation.None;
this._snackBar.open('This is a snackbar!', 'Action', config);

方法5：ViewContainerRefを使用する

ViewContainerRefを使用して、SnackBarコンポーネントのホスト要素に直接スタイルを適用することができます。この方法は、動的にSnackBarコンポーネントの背景色を変更したい場合に有効です。

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-snackbar',
  templateUrl: './snackbar.component.html'
})
export class SnackbarComponent {
  @ViewChild('snackbarContainer', { static: true }) snackbarContainer: ViewContainerRef;
  constructor(private _snackBar: MatSnackBar) {}

  openSnackBar() {
    const config = new MatSnackBarConfig();
    this._snackBar.open('This is a snackbar!', 'Action', config)
      .afterDismissed().subscribe(() => {
        this.snackbarContainer.element.nativeElement.style.backgroundColor = '#f44336'; /* 赤色に変更 */
      });
  }
}

方法6：OverlayContainerを使用する

import { Component } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-snackbar',
  templateUrl: './snackbar.component.html'
})
export class SnackbarComponent {
  constructor(private _snackBar: MatSnackBar, private overlayContainer: OverlayContainer) {}

  openSnackBar() {
    this.overlayContainer.getContainerElement().style.backgroundColor = '#f44336'; /* 赤色に変更 */
    this._snackBar.open('This is a snackbar!', 'Action');
  }
}