升级IntelliJ IDEA 2022.1.3后::ng-deep显示弃用的解决方案

::ng-deep 被IDE标记为弃用是Angular团队的既定调整，目前该选择器暂未从框架中移除，但长期维护的项目不建议继续依赖。针对你修改mat-form-field下划线颜色的需求，按推荐优先级选择以下实现方式即可，完全不需要使用已弃用的穿透选择器：

方案1：使用组件内置CSS自定义属性（最推荐） #

Angular Material 从v13版本开始为所有核心组件暴露了专门的CSS自定义属性，不需要穿透组件视图封装就能直接修改样式，且样式天然支持局部绑定，不会污染全局。
针对你的场景，直接给自定义类register-custom-select配置对应属性即可：

.register-custom-select {
  /* 默认状态下划线下颜色 */
  --mdc-filled-text-field-active-indicator-color: #838383;
  /* 鼠标悬停下划线颜色 */
  --mdc-filled-text-field-hover-active-indicator-color: #838383;
  /* 聚焦状态下划线颜色 */
  --mdc-filled-text-field-focus-active-indicator-color: #838383;
}

如果你使用的是v14及更早、未做MDC重构的旧版Angular Material，直接使用对应旧版变量即可：

.register-custom-select {
  --mat-form-field-underline-color: #838383;
}

这种写法完全符合Angular视图封装规则，IDE不会报任何弃用提示，是官方首推的自定义组件样式方式。

方案2：关闭当前组件视图封装（适合无对应CSS变量的复杂样式覆盖场景） #

如果你需要修改的组件样式没有暴露对应自定义属性，可以通过关闭当前组件的视图封装，让组件内样式直接作用于内部子元素，不需要任何穿透选择器：

1. 在组件TS文件中引入ViewEncapsulation：

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

2. 在组件装饰器中添加封装配置：

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

3. 直接在组件样式文件中编写目标样式，不需要加任何穿透前缀：

   .register-custom-select .mat-form-field-underline {
     background-color: #838383;
   }
   

注意：开启ViewEncapsulation.None后，当前组件样式文件中所有样式都会变为全局生效，必须给所有样式加上当前组件独有的类名前缀，避免意外覆盖其他组件的样式。

方案3：全局样式覆盖（适合全站统一样式的场景） #

如果你需要整个项目所有Angular Material表单项的下划线都使用这个颜色，直接把样式写到项目的全局样式文件（通常为styles.css/styles.scss）即可，全局样式不受视图封装限制，不需要加穿透选择器：

.mat-form-field-underline {
  background-color: #838383;
}

如果需要限制生效范围，给外层公共容器加专属类名做前缀即可。

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