CODEWITHSUNDEEP
cssangularangular-materialprogress-bar
Zlatko
Zlatko

Reputation: 19569

MdProgressBar buffer background color in Angular Material

I'm using progress bar from Angular Material and trying to custom-style it. I can set the borders, radiues, color of the progressed part (buffer?) simply by styling the element itself (e.g. md-progress-bar { border: 1px solid black }) but I cannot add the background color for the bar. If I change the background color of the .mat-progress-bar-buffer via dev tools, it works, but if not via component css (or any other css, for that matter).

So, this doesn't work:

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

What else can I try?

Edit: here's a simple plunker to play with.

Upvotes: 1

Views: 2913

Answers (2)

penleychan
penleychan

Reputation: 5470

Not sure if this will be any better, however since /deep/ and >>> will be deprecated from browsers support, angular have it's own way to emulate this using ::ng-deep and is the prefer way until better solution is found.

Documentation on angular says it will be deprecated however on github vicb mention that they have no plan to remove ::ng-deep in a near future.

Usage is similar to /deep/:

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

Upvotes: 2

Zlatko
Zlatko

Reputation: 19569

Well, it's due to ViewEncapsulation. If I add /deep/ .mat-progress-bar-buffer, the style is applied.

I'd still like to find a better solution (with /deep/ being all but gone).

Upvotes: 1

Related Questions