web-dev-qa-db-fra.com

Angular Material Overriding Default Style of SnackBar Component

J'essaie de remplacer la largeur maximale par défaut du composant snackbar dans Angular Material).

Le CSS appliqué par Angular Material est illustré ci-dessous:

.mat-snack-bar-container {
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    margin: 24px;
    max-width: 568px;
    min-width: 288px;
    padding: 14px 24px;
    transform: translateY(100%) translateY(24px);
}

J'ai essayé de remplacer le même style dans mon fichier style.css mais ce style est remplacé par le style par défaut.

 .mat-snack-bar-container {
   max-width: 800px;
 }

J'ai trouvé une réponse à une question similaire mais je sais que la réponse à cette question est maintenant obsolète (/ deep/est obsolète).

Existe-t-il une solution de meilleures pratiques à cela?

cssangularangular-material2
12
Tony Scialo

Pour ce faire correctement, vous devez définir l'encapsulation de la vue sur Aucun sur votre composant:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

Ensuite, dans votre composant css, vous pouvez simplement faire ceci:

.mat-snack-bar-container {
   max-width: 800px;
}

De la documentation officielle:

View Encapsulation = None signifie que Angular ne fait pas d'encapsulation de vue. Angular ajoute le CSS aux styles globaux. Les règles de portée, les isolations et les protections discutées plus haut don ne s'applique pas. Cela revient essentiellement à coller les styles du composant dans le code HTML.

5
Andrei Matracaru

Vérifié pour @ angular/material v7.0.x:

CSS ! Modificateur important fait l'affaire.

Mettez ceci est src/styles.scss (le css global de l'application):

.mat-snack-bar-container {
  max-width: 100% !important;
}

Nous ajustons également sa police:

/* Overrides SnackBar CSS in Material Design's .mat-simple-snackbar class */
/* Original sizes: font: 24px, height: 47.952px */ 
.mat-simple-snackbar {
  display: flex; 
  font-size: 28px !important; // 28px  is double, 42px for triple
  min-height: 70px !important; // 70px for double, 90px for triple
  align-items: center !important;
  justify-content: center !important;
}
0
Paul Lockwood

Le chemin à parcourir.


encapsulation: ViewEncapsulation.None

Voici un stackblick pour démontrer

0
Deunz

Au 30 juin 2019, en utilisant Angular Material 8.0.1 avec Angular 8.0.3, les SCSS et TypeScript suivants semblent fonctionner pour remplacer la couleur de le bouton d'action dans un Angular Material snackbar * sans utiliser! important *:

styles.scss (pas la durée extrêmement longue, qui m'a permis d'inspecter le style avant qu'il ne disparaisse):

$snackBarTextColor: white;
$snackBarBackgroundNormal: #087a51;
$snackBarActionColor: lightgray;
.snackBarInfo {
    background-color: $snackBarBackgroundNormal;
    color: $snackBarTextColor;


}
.mat-simple-snackbar > span {
    font-weight: bold;
}
.mat-simple-snackbar-action {
    .mat-button {
        .mat-button-wrapper {
            color: $snackBarActionColor;
        }
    }
}

app.module.ts:

import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
providers: [
        {
            provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
            useValue: {
                duration: 41000,
                horizontalPosition: 'center',
                verticalPosition: 'bottom',
                panelClass: 'snackBarInfo'
            }
        }
    ]
0
user3785010