Style "mat-sort-header-sorted" has no effect in mat-table tutorial?

Question

I'm trying to learn a bit of Angular and Material Design, and I'm having a look at the tutorial for mat-tables: https://material.angular.io/components/table/examples

In the example 'Table with sorting', in the CSS there is the following style definition:

th.mat-sort-header-sorted {
  color: black;
}

I really do not see what it is doing... I had assumed that the header of the sorted column would be highlighted in black, but when I tried to change it to red I didn't notice any difference.

I tried to change to 'red' both in my environment and in their StackBlitz example: https://stackblitz.com/angular/jxmdlyyrgka?file=app%2Ftable-sorting-example.ts

Is this some kind of bug or am I looking in the wrong direction? Thanks!

Answer 1

Using ::ng-deep can access class that is defined in tag as alternative to style it.

::ng-deep is deprecated and can be removed, also can be used

ViewEncapsulation.None in component decorator to avoid using ::ng-deep

 ::ng-deep .mat-sort-header-sorted {
     color: red; /*change color of header*/
 }

 ::ng-deep .mat-sort-header-arrow {
   color: red; /*change color of arrow*/
 }