Angular 16 Material 16如何设置排序列的文本对齐方式

问题重现 #

使用带matSort的Material Table组件时，给表头单元格设置样式后，未添加排序功能的表头样式生效，但带mat-sort-header的排序列表头样式完全不生效：

组件模板代码：

<table mat-table [dataSource]="data" class="example-table" matSort >
        
  <!-- Created Column -->
  <ng-container matColumnDef="created">
    <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
      Created
    </th>
    <td mat-cell *matCellDef="let row">{{row.created_at | date}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

尝试的CSS代码（仅对未排序列生效）：

.mat-mdc-header-cell {
  text-align: right;
  color: red;
}

原因分析 #

带mat-sort-header的表头单元格内部，Material会自动生成.mat-mdc-sort-header-content元素包裹表头文本，你的样式会被该内部元素的默认样式覆盖；同时Angular组件的视图封装机制，也会导致组件内的样式无法穿透到Material组件的内部DOM结构。

解决方案 #

方案1：直接定位排序表头的内部元素 #

调整CSS选择器，直接选中排序表头的内容元素，提升样式优先级：

/* 统一设置所有表头单元格的对齐方式 */
.mat-mdc-header-cell {
  text-align: right;
}
/* 专门针对排序表头的文本内容设置颜色 */
.mat-mdc-header-cell .mat-mdc-sort-header-content {
  color: red;
}

方案2：穿透组件视图封装（方案1不生效时用） #

如果组件启用了默认的视图封装，可使用::ng-deep穿透样式到子组件内部：

::ng-deep .mat-mdc-header-cell {
  text-align: right;
  color: red;
}
/* 更精准地针对排序表头单独设置 */
::ng-deep .mat-mdc-header-cell.mat-mdc-sort-header .mat-mdc-sort-header-content {
  color: red;
  text-align: right;
}

注意：::ng-deep虽能快速解决问题，但Angular官方不推荐长期使用，若不想用它，可把样式移到全局样式文件（比如styles.css）中。

方案3：自定义类+高优先级选择器 #

给表头单元格添加自定义类，结合类选择器提升样式优先级：
模板修改表头：

<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear class="custom-header-cell">
  Created
</th>

对应CSS：

.mat-mdc-header-cell.custom-header-cell {
  text-align: right;
}
.mat-mdc-header-cell.custom-header-cell .mat-mdc-sort-header-content {
  color: red;
}

内容的提问来源于stack exchange，提问作者SullenMan