如何覆盖Angular中mat-sort-header的text-align:center为right？

问题核心 #

Angular的视图封装机制会给组件样式自动添加专属前缀，导致自定义类无法穿透到mat-sort-header内部的Material组件样式层级，直接添加的text-align规则会被默认样式覆盖。

可行解决方法 #

1. 使用::ng-deep穿透样式（最直接） #

在组件的CSS/SCSS文件中，通过::ng-deep打破视图封装，精准定位到mat-sort-header的核心内容元素：

::ng-deep .custom-sort-header .mat-sort-header-content {
  text-align: right;
}

模板中给mat-sort-header绑定自定义类：

<mat-sort-header class="custom-sort-header">列标题</mat-sort-header>

注：::ng-deep虽被官方标记为过时，但目前仍是解决组件样式穿透的常用方案，若担心兼容可结合其他方法。

2. 关闭组件视图封装 #

在组件TS文件中，将ViewEncapsulation设置为None，让组件样式全局生效（需通过父容器类限定范围避免样式冲突）：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {}

组件样式中添加带范围限定的规则：

.app-your-component .custom-sort-header .mat-sort-header-content {
  text-align: right;
}

3. 写入全局样式文件 #

直接将样式添加到项目根目录的styles.scss（或styles.css）中，全局样式不受组件封装限制：

.custom-sort-header .mat-sort-header-content {
  text-align: right;
}

模板中同样给mat-sort-header添加custom-sort-header类即可。

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