CODEWITHSUNDEEP
angularangular-material2
andre luis borges de paula
andre luis borges de paula

Reputation: 1119

Angular 5 and material - How to change the background color from SnackBar component

I have to change the background from the snackbar component. I'm using it to alert or inform the user about some either error or completed action the user did.

The material version from the project. "@angular/material": "^5.0.0-rc.1",

The documentation https://material.angular.io/components/snack-bar/api say about an api to change the class.

panelClass: string | string[] Extra CSS classes to be added to the snack bar container.

This is what I add in the css file.

.mycsssnackbartest {
  background-color: blue;
}

This is the code to open the snackbar

this.snackBar.open('Informing the user about sth', 'User Message' , {
    panelClass: ['mycsssnackbartest ']
} );

What am I doing wrong?

Upvotes: 98

Views: 116749

Answers (8)

Dilanka Bc
Dilanka Bc

Reputation: 59

If you use angular/material >= 19 and SCSS, you need to add this to styles.scss.

.mat-mdc-snack-bar-container.blue-snackbar {
    --mdc-snackbar-container-color: #2196f3;
    --mat-mdc-snack-bar-button-color: #fff;
    --mdc-snackbar-supporting-text-color: #fff;
  }

In your component use,

const snackBar = inject(MatSnackBar);

snackBar.open('Your message', 'Close', {
  duration: 3000, panelClass: ['blue-snackbar'] });

Upvotes: 0

Karol Pawlak
Karol Pawlak

Reputation: 464

Actually as using Angular 18 and Material Design 3

--mat-mdc-snack-bar-button-color: #fff;

wont work anymore, resulting in regular blue text on the button.

Use slightly different variable to get the job done:

--mat-snack-bar-button-color: #fff;

Upvotes: 0

Igor Ganov
Igor Ganov

Reputation: 49

complementing the answer: if you have CSS (not SASS) and ViewEncapsulation enabled, it looks like this:

 ::ng-deep .mat-mdc-snack-bar-container.blue-snackbar {
    --mdc-snackbar-container-color: #2196f3;
    --mat-mdc-snack-bar-button-color: #fff;
    --mdc-snackbar-supporting-text-color: #fff;
  }

Upvotes: 2

Philipp Kief
Philipp Kief

Reputation: 8613

Angular < V15

You have to use the panelClass option (since v6) to apply classes on a snackbar like this:

this.snackBar.open(message, action, {
  duration: 2000,
  panelClass: ['blue-snackbar']
});

CSS (in global styles.scss):

.blue-snackbar {
  background: #2196F3;
}

See the Stackblitz example

Angular >= v15

The Angular team did add global css variable

So you still need to add the panelClass and you can add it to CSS like this

  .mat-mdc-snack-bar-container {
    &.blue-snackbar {
      --mdc-snackbar-container-color: #2196f3;
      --mat-mdc-snack-bar-button-color: #fff;
      --mdc-snackbar-supporting-text-color: #fff;
    }
  }

Upvotes: 198

umbe1987
umbe1987

Reputation: 3610

This can also be achieved globally by importing MAT_SNACK_BAR_DEFAULT_OPTIONS in app.module.ts:

app.module.ts

import {
  MatSnackBarModule,
  MAT_SNACK_BAR_DEFAULT_OPTIONS,
} from '@angular/material/snack-bar';

@NgModule({
  providers: [
    {
      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
      useValue: { panelClass: ['mycsssnackbartest'] },
    },
  ],
})

styles.css

.mycsssnackbartest {
  background-color: blue;
}

Upvotes: 1

Adam reuben
Adam reuben

Reputation: 55

Yeah after adding ::ng-deep in global style file(.css) works fine after each attribute... As follows

noMatchConfig: MatSnackBarConfig = {
    duration: 2000,
    horizontalPosition: 'right',
    verticalPosition: 'top',
    panelClass:['redNoMatch']
  }



::ng-deep .redNoMatch
{
  color:white;
  background: #F44336 !important;
}

Upvotes: 5

FranSanchis
FranSanchis

Reputation: 1701

Using themes:

Primary: 

this.snackBar.open('Some message','Some action', {
    duration: 2000,
    panelClass: ['mat-toolbar', 'mat-primary']
});

Switch: 'mat-primary' to 'mat-accent' or 'mat-warn'

Upvotes: 67

shreekar hegde
shreekar hegde

Reputation: 283

//in component.ts
this.snackbar.open(message, '', {
    duration: 2000,
    verticalPosition: 'top',
    panelClass: ['warning']
 });
//in component.css
::ng-deep .warning{
   background: 'yellow';
}

Upvotes: 23

Related Questions