如何在Angular Material 15中替代已废弃的::ng-deep？

在Angular Material 15中，组件默认的ViewEncapsulation会隔离内部样式，导致直接编写.mat-mdc-select-arrow这类选择器无法生效，同时::ng-deep已被官方标记为废弃，以下是几种可行的替代方案：

方案1：使用全局样式文件 #

全局样式不受组件封装规则限制，可直接在项目根目录的styles.scss（或styles.css）中添加样式。如果担心全局样式污染其他组件，可以通过父类选择器限定作用范围：

/* 仅作用于拥有.div-test类的容器内的mat-select箭头 */
.div-test .mat-mdc-select-arrow {
  display: none;
}

方案2：关闭当前组件的ViewEncapsulation #

在组件的元数据中设置ViewEncapsulation.None，这样组件内的样式会变成全局生效，但同样可以通过父类选择器限定范围，避免影响其他组件：

组件.ts文件 #

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 {
  selected = { id: 'en' }; // 示例数据
}

组件.scss文件 #

.div-test .mat-mdc-select-arrow {
  display: none;
}

方案3：利用Angular Material的CSS变量（针对MDC组件） #

Angular Material 15基于Material Design Components（MDC）构建，部分组件提供了可直接修改的CSS变量。不过针对隐藏下拉箭头的需求，前面两种方案更直接。如果需要修改其他样式，可查看对应组件的官方文档找到可用的CSS变量，例如修改mat-select的边框颜色：

.div-test {
  --mdc-outlined-text-field-outline-color: #ccc;
}

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