I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this framework.
Here is my code snippet from app.component.ts:
import { Component } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MatSnackBarHorizontalPosition } from '@angular/material/snack-bar';
import { MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
verticalPosition: MatSnackBarVerticalPosition = 'top';
constructor(private snackBar: MatSnackBar) { }
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
panelClass: ['.snackbar-style'],
});
}
}
And here is the relevant part of my app.component.css:
.snackbar-style {
background-color: black;
color: hotpink;
}