如何不使用已弃用的::ng-deep调整Angular Material mat-grid-tile文本对齐？

下面是几种无需依赖已弃用::ng-deep的可行方案：

方案一：修改组件视图封装策略 #

通过关闭组件的视图封装，直接对Material内部类编写样式，同时做好作用域隔离避免全局污染：

1. 在组件的@Component元数据中添加视图封装配置：

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

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

2. 在组件CSS中直接编写样式，无需::ng-deep：

/* 通过专属类名限制样式作用范围 */
mat-grid-tile.blue .mat-figure {    
  background: #2db7f1;    
  color: #FFFFFF;    
  display: flex;    
  justify-content: flex-start; /* 左对齐 */
  align-items: flex-start; /* 顶部对齐，按需调整 */
}

注意：关闭视图封装后样式会全局生效，必须通过组件专属类名或父容器类名限定作用范围，防止影响其他组件。

方案二：自定义内容容器（推荐） #

完全绕过Material内部的.mat-figure结构，在mat-grid-tile内嵌套自定义容器，自主控制内容对齐：

1. 模板代码：

<mat-grid-tile>
  <div class="custom-tile-content blue">
    你的自定义内容
  </div>
</mat-grid-tile>

2. 组件CSS样式：

.custom-tile-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start; /* 左对齐，可选flex-end（右对齐）、center（居中） */
  align-items: flex-start; /* 顶部对齐，可选flex-end（底部对齐）、center（居中） */
}

.custom-tile-content.blue {
  background: #2db7f1;
  color: #FFFFFF;
}

这种方式不依赖Material内部DOM结构和类名，版本更新也不会影响样式，是最安全可靠的方案。

方案三：作用域内的全局选择器（过渡方案） #

如果不想关闭视图封装，可以用:host选择器缩小::ng-deep的作用范围，仅对当前组件内的元素生效：

:host mat-grid-tile.blue ::ng-deep .mat-figure {    
  background: #2db7f1;    
  color: #FFFFFF;    
  display: flex;    
  justify-content: flex-start; 
}

不过这种方式仍依赖::ng-deep语法，仅作为过渡使用，优先推荐前两种方案。

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