Angular使用ViewEncapsulation.None后mat-form-field样式继承冲突如何解决

ViewEncapsulation.None会关闭Angular的视图样式封装，将当前组件的所有样式提升为全局样式，作用于整个应用，所以你在登录页对mat-form-field设置的自定义样式会全局生效，覆盖其他组件的同组件默认样式。

• 方案1：使用带作用域限制的深度选择器（推荐）
  移除登录页的ViewEncapsulation.None配置，使用:host + ::ng-deep组合限定样式作用域，仅对当前登录组件内的mat-form-field生效，不会污染全局：

/* 登录组件的样式文件 */
:host ::ng-deep .mat-form-field {
  /* 你原来的自定义样式代码 */
}
:host ::ng-deep .mat-form-field-label {
  /* 其他要覆盖的子元素样式 */
}

• 方案2：保留ViewEncapsulation.None时加唯一类前缀
  如果业务需要必须关闭视图封装，给登录组件的最外层根元素添加唯一的自定义类（如login-page-wrapper），所有自定义mat-form-field的样式都加上该类作为前缀，限制作用范围：

.login-page-wrapper .mat-form-field {
  /* 自定义样式代码 */
}

• 方案3：修复已被污染的其他组件样式
  如果其他页面的样式已经被影响，给对应页面的根元素或者mat-form-field添加专属自定义类，用更高权重的选择器覆盖全局污染的样式即可。

• 方案4：长期优化方案：用自定义类隔离组件样式
  给需要特殊样式的mat-form-field单独添加自定义类，避免全局修改同组件的默认样式：

<!-- 登录页的mat-form-field -->
<mat-form-field class="login-custom-field">
  <input matInput placeholder="账号">
</mat-form-field>

/* 全局样式文件或登录组件样式文件中 */
.login-custom-field {
  /* 自定义样式代码 */
}

• 首次使用mat-form-field效果
  
• 其他组件mat-form-field异常效果
  
• mat-form-field预期效果
  

内容的提问来源于stack exchange，提问作者Manuel Brás