Angular 2/4 How to style angular material design snackbar

Question

I am new to Angular2/4 and angular typescript. I want to style the angular material design snackbar for example change the background color from black and font

Answer 1

For angular 6 to 9 works with (In your global scss style for material)

Explaination: Customize your snackBar with an @mixin function, in this case is called "@mixin snack-theme($theme)", then you add all classes declared in this function to your templace like this

@include snack-theme($my-app-theme);

Global scss file (styles.scss):

@import '../node_modules/@angular/material/_theming.scss';
@include mat-core();

$background-primary: #232323;
$background-accent: #353535;
$background-warn: #c1640c;
$font-color-default: silver;

$my-app-primary: mat-palette($mat-light-green, 700);
$my-app-accent: mat-palette($mat-cyan, 800 );
$my-app-warn: mat-palette($mat-red, 400);


$my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn);


@mixin snack-theme($theme) {
    // Extract whichever individual palettes you need from the theme.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);


    .mat-snack-bar-container {
        background-color: $background-accent !important;
        color: $font-color-default;
    }
    //Added with panelClass property
    .snack-error {
        button {
            color: mat-color($warn)
        }
    }
    //Added with panelClass property
    .snack-success {
        button {
            color: mat-color($primary)
        }
    }
}

@include snack-theme($my-app-theme);

...

And calling snack like (In your component)

        this.snackBar.open("your message", 
           "your action",
          {
            duration: 3000,
            panelClass: (isSuccess ? ["snack-success"] : ["snack-error"])
          })

snack-success and snack-error class are defined in @mixed function (@mixin snack-theme)

NOTE: Doesn't forget to include your global scss file in your scss component. For example: