web-dev-qa-db-fra.com

angulaire 5 matsnackbar changer la couleur du bouton d'action

J'utilise MatSnackBar pour mon projet angular 5 et je n'arrive pas à modifier la couleur du bouton "Action". 

J'ai injecté le snack-bar à mon HttpInterceptor:

    this.snackBar.open('Invalid Login', 'Ok', {
                    duration: 2000,
                    panelClass: ['my-snack-bar']
                });

mon css:

    .my-snack-bar {
        background-color: #E8EAF6;
        color: #3D5AFE;
    }

Comment puis-je changer la couleur du bouton d'action 'Ok'?

angular-materialangular5
5
Kang Bin Kim

Version: "@ angular/material": "^ 5.2.4",

Vous pouvez accéder aux couleurs avec l'option panelClass + la classe générée ".mat-simple-snackbar-action".

Mon exemple:

snackbar.component.ts

  private configSucces: MatSnackBarConfig = {
    panelClass: ['style-succes'],    
  };

  private configError: MatSnackBarConfig = {
    panelClass: ['style-error'],
  };

  public snackbarSucces(message) {
    this.snackBar.open(message, 'close', this.configSucces);
  }

  public snackbarError(message) {
    this.snackBar.open(message, 'close', this.configError);
  }

snackbar.component.css

  .style-succes {
    color: $primary-text;
    background-color: $primary;
  }
  .style-succes .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }

Informations supplémentaires Si vous utilisez un mixin pour des thèmes personnalisés, vous pouvez utiliser quelque chose comme ceci pour obtenir toutes les couleurs:

@mixin snackbar($theme) {
  $primary: mat-color(map-get($theme, primary));
  $primary-text: mat-color(map-get($theme, primary), default-contrast);
  $warn: mat-color(map-get($theme, warn));
  $warn-text: mat-color(map-get($theme, warn), default-contrast);

  .style-succes {
    color: $primary-text;
    background-color: $primary;
  }
  .style-succes .mat-simple-snackbar-action  {
    color: $primary-text;
  }
  .style-error {
    color: $warn-text;
    background-color: $warn;
  }
  .style-error .mat-simple-snackbar-action {
    color: $warn-text;
  }
}
6
PVermeer

Cela a fonctionné pour moi:

.my-snack-bar button {
    background-color: gray;
    color: white;
}
1
Steig

Utilisez ceci 

.my-snack-bar {
    background-color: #E8EAF6;
}

css dans votre fichier style.css (ou .scss). Cela ne fonctionnera pas si vous mettez n'importe où ailleurs.

1
JpG

Comme mentionné ci-dessus, vous pouvez personnaliser le style du snack-bar en utilisant la configuration panelClass.

this.snackBar.open(message, action, {
            duration: 40000,
            panelClass: "success-dialog"
        });

La clé ici est de remplacer par CSS le mat-simple-snackbar-action . Cela fera le tour de changer la couleur du texte du bouton d’action.

.success-dialog {
    color: white !important;
    background-color: $success !important;
    .mat-simple-snackbar-action {
        color: white !important;
    }
}
0
velval