Стиль "mat-sort-header-sorted" не имеет никакого эффекта в обучающей программе mat-table?

Question

Я пытаюсь немного изучить угловой и материальный дизайн, и я смотрю учебник для мат-таблиц: https://material.angular.io/components/table/examples

В примере «Таблица с сортировкой»,в CSS есть следующее определение стиля:

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

Я действительно не вижу, что он делает ... Я предполагал, что заголовок отсортированного столбца будет выделен черным, но когда япытался изменить его на красный, я не заметил никакой разницы.

Я пытался изменить на «красный» как в моей среде, так и в их примере StackBlitz: https://stackblitz.com/angular/jxmdlyyrgka?file=app%2Ftable-sorting-example.ts

Это какой-тоошибка или я смотрю в неправильном направлении?Спасибо!

Answer 1

Пожалуйста, определите пользовательские стили CSS следующим образом:

.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>

Answer 2

Использование ::ng-deep может получить доступ к классу, который определен в теге как альтернатива стилю.

:: ng-deep устарел и может быть удален, также может использоваться

ViewEncapsulation.None в компонентном декораторе, чтобы избежать использования :: 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*/
 }