Reputation: 1119
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
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
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
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
Reputation: 8613
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
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
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
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
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
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