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

7
votes

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!

2
angularangular-material

2 Answers

8
votes

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*/
 }
0
votes

Please define custom CSS styles as follows:

.text-underline {
  text-decoration: underline !important;
}

.text-bold {
  font-weight: bold !important;
}

.color-black {
  color: black !important;
}
<th class="text-underline text-bold color-black" mat-header-cell *matHeaderCellDef mat-sort-header> value </th>