如何防止Angular组件样式覆盖影响其他路由组件？

这个坑我之前踩过！Angular的组件样式隔离本来是用来避免样式冲突的，但碰到Material这种封装较深的组件库，直接用::ng-deep很容易把样式“泄露”到其他路由组件里。给你几个亲测有效的解决方案：

1. 最推荐：:host + ::ng-deep组合限定作用域 #

Angular的:host选择器专门用来定位当前组件的宿主元素，把它和::ng-deep结合，就能让穿透的样式只作用于当前组件内部的Material控件，不会跑到其他组件去。

你可以把原来的样式改成这样：

/* 当前组件的styles.scss或组件内的styles */
:host ::ng-deep .mat-form-field-underline {
  /* 你的自定义样式，比如隐藏下划线 */
  display: none;
  /* 或者修改颜色、高度等 */
  /* border-bottom-color: red; */
}

原理是:host把样式的作用范围锁定在当前组件，::ng-deep负责穿透Material组件的封装层级，这样样式就只会影响当前组件里的所有mat-form-field下划线。

2. 给组件加唯一类名 + 关闭ViewEncapsulation（特殊场景用） #

如果第一种方法没生效，你可以尝试关闭当前组件的样式封装，但一定要配合唯一类名来避免全局污染：

首先在组件装饰器里修改encapsulation配置：

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 { /* ... */ }

然后给组件模板的根元素加一个独一无二的类名：

<!-- 组件模板根元素 -->
<div class="only-this-component">
  <!-- 你的内容和mat-form-field -->
  <mat-form-field>...</mat-form-field>
</div>

最后把样式限定在这个类名里：

.only-this-component .mat-form-field-underline {
  display: none;
}

这种方法要谨慎用，因为关闭ViewEncapsulation后组件内的所有样式都会变成全局的，必须靠类名精准锁定。

3. 给单个mat-form-field加自定义类（局部修改） #

如果你只是想修改当前组件里某一个mat-form-field的下划线，而不是全部，可以给目标控件加自定义类：

<mat-form-field class="custom-underline-field">
  <input matInput placeholder="示例输入">
</mat-form-field>

然后在组件样式里写：

:host ::ng-deep .custom-underline-field .mat-form-field-underline {
  display: none;
}

这样只会给加了custom-underline-field类的控件改样式，更精准。

为什么你之前的样式无效？ #

大概率是只写了::ng-deep没加:host，导致::ng-deep把样式提升到了全局作用域，所以切换路由后其他组件的mat-form-field也受到了影响。加上:host就把样式牢牢锁在当前组件里了。

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