0

due to style problems with with VIEWENCAPSULATION.NONE in my angular component I switched to .EMULATED

Now, I am unable to make the simplest CSS changes.

The styles saved in the components css file, NOT in the global css file..

Eg, in a mat-tab element I want to make the font bold. Doing this on-the-fly in the devtools in chrome this works fine. Also this worked with no view encapsulation before.

Now it doesn't. A simple change likes this eludes me...

Here is my html and the previously working css (without encapsulation).

<mat-tab-group>
  <mat-tab *ngFor="let l of letters" [label]="l.letter">
    ...
  </mat-tab>
</mat-tab-group>

.mat-tab-label {
  font-weight: bold!important;
}

I have tried all of the following, nothing works. Can somebody please point out the correct way? Thanks!

.mat-tab-label {
  font-weight: bold!important;
}

mat-tab-label {
  font-weight: bold!important;
}

.mat-tab.mat-tab-label {
  font-weight: bold!important;
}

mat-tab.mat-tab-label {
  font-weight: bold!important;
}

.makeBold {
  font-weight: bold!important;
}
baouss
  • 1,312
  • 1
  • 22
  • 52
  • Hint: Use `::ng-deep` – Edric Feb 15 '18 at 14:41
  • Thanks I'll try this out when I'm at home. A quick read told me the this selector is already deprecated.. Also, Emulated being the default encapsulation, I was under the impression that I would not have to apply special selectors just to make standard style adjustments.. I'm reading everywhere that the encapsulation is done by angular for me behind the scenes... So this (having to manually do special - deprecated - selectors) strikes me as contrary to the purpose of making it easy – baouss Feb 15 '18 at 17:46
  • Also, the styles live in the component's css file, not in the global one.. – baouss Feb 15 '18 at 17:54

0 Answers0