Couleur de fond du tampon MdProgressBar en matériau angulaire

Question

J'utilise progress bar de Angular Material et j'essaie de le personnaliser. Je peux définir les bordures, les rayures, la couleur de la partie progressée (tampon?) Simplement en stylisant l'élément lui-même (par exemple md-progress-bar { border: 1px solid black }) mais je ne peux pas ajouter la couleur de fond pour la barre. Si je change la couleur de fond du .mat-progress-bar-buffer via les outils de développement, cela fonctionne, mais sinon via le composant css (ou tout autre css, d'ailleurs).

Donc, cela ne fonctionne pas:

.mat-progress-bar-buffer { 
    background-color: $white; 
} 

Que puis-je essayer?

Éditer: here est un simple plunker pour jouer avec.

Answer 1

Vous ne savez pas si cela sera meilleur, mais puisque/deep/et >>> seront déconseillés par le support des navigateurs, angulaire a sa propre façon d'émuler en utilisant ::ng-deep et est le moyen préféré jusqu'à ce qu'une meilleure solution soit trouvée.

Documentation on angular dit que ce sera dépréciée cependant sur github mention de VICB qu'ils ont aucun plan pour retirer ::ng-deep dans un avenir proche.

L'utilisation est similaire à /deep/:

::ng-deep .mat-progress-bar-buffer {}

Answer 2

Eh bien, cela est dû à ViewEncapsulation. Si j'ajoute /deep/ .mat-progress-bar-buffer, le style est appliqué.

J'aimerais toujours trouver une meilleure solution (avec/deep/étant presque disparu).