Angular 2/4 Cómo darle estilo a la barra de bocadillos de diseño de material angular

La guía paso a paso o código que verás en este post es la solución más rápida y válida que encontramos a tus dudas o dilema.

Solución:

md-snackbar proporciona un servicio para proporcionar personalizado config. Una de las propiedades de config es extraClasses que permite agregar clases de CSS al contenedor de snack bar (doc).

extraClasses se puede usar con ::ng-deep para anular las clases CSS predeterminadas. Aquí hay un ejemplo:

componente.ts:

Requiere lo siguiente import en el componente:

import MdSnackBar, MdSnackBarConfig from '@angular/material';

(proporcionando una configuración personalizada)

openSnackBar(message: string, action?: string) 
  let config = new MdSnackBarConfig();
  config.extraClasses = ['custom-class'];
  this.snackBar.open(message, action ? 'Action Label' : undefined, config);

componente.css:

::ng-deep snack-bar-container.custom-class 
  background: yellow;


::ng-deep .custom-class .mat-simple-snackbar 
  color: green;

Aquí hay una demostración de Plunker si desea probar.

ACTUALIZACIÓN DE NOVIEMBRE DE 2018: Angular 6+

La sintaxis ha cambiado un poco, con el md- prefix siendo reemplazado mat- y extraClasses fue reemplazado con panelClass. Sin embargo, la función es en general la misma:

const config = new MatSnackBarConfig();
config.panelClass = ['custom-class'];
...

y las importaciones también:

import  MatSnackBar, MatSnackBarConfig  from '@angular/material';

Hice el siguiente código para trabajar con Angular 6 y Angular Material 6.

El servicio que contiene las llamadas snackBar:

@Injectable()
export class MessageService 
   constructor(private snackBar: MatSnackBar) 

   showError(message: string) 
      const config = new MatSnackBarConfig();
      config.panelClass = ['background-red'];
      config.duration = 5000;
      this.snackBar.open(message, null, config);
   

Agregue la clase css en el estilos.css expediente:

.background-red
   background-color: rgb(153, 50, 50);

De tapete SnackBarConfig Class puedes añadir

panelClass: string | string[]

“Clases de CSS adicionales para agregar al contenedor de la barra de bocadillos”.

this.snackBar.open("Your custom Message", '', 
      panelClass:"custom_sneak_bar"

Si aceptas, tienes la opción de dejar un ensayo acerca de qué le añadirías a este enunciado.

---

---

Utiliza Nuestro Buscador