Angular使用ViewEncapsulation.None覆写Angular Material样式出现冲突问题

问题根源 #

你触发冲突的核心原因是使用了ViewEncapsulation.None：这个配置会把当前组件的所有样式提取到应用全局样式表，路由跳转离开组件时样式不会被自动销毁，再次进入组件还会重复插入样式；如果其他组件也关闭了样式封装且没有做样式隔离，就会出现优先级混乱、互相覆盖的问题。

解决方案 #

方案1：保留默认样式封装，使用::ng-deep配合宿主选择器（推荐） #

Angular默认的ViewEncapsulation.Emulated会给组件生成唯一属性标记，实现样式天然隔离，你只需要搭配::ng-deep穿透封装覆盖Material组件样式即可，目前::ng-deep虽标注废弃但Angular官方未推出替代方案，仍可正常使用：

1. 移除组件TS中encapsulation: ViewEncapsulation.None配置，保留宿主类声明即可
2. 在组件的样式文件中按如下结构编写覆盖样式：

// 先定位当前组件宿主，确保样式只会作用在当前组件内部
:host.app-forms {
  // ::ng-deep 用于穿透Angular样式封装，修改内部Material组件样式
  ::ng-deep mat-card {
    // 你需要自定义的卡片样式
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  ::ng-deep mat-form-field {
    // 表单组件自定义样式
    width: 100%;
    margin-bottom: 16px;
  }
}

其余两个组件也按照相同结构编写样式即可，完全不会出现跨组件样式冲突。

方案2：必须关闭样式封装时，所有样式加唯一前缀 #

如果业务场景必须使用ViewEncapsulation.None，你需要给每个组件的所有自定义样式都加上当前组件的唯一宿主类作为前缀：

/* 仅作用在app-forms组件内的mat-card */
.app-forms mat-card {
  background: #fff;
  padding: 20px;
}
/* 仅作用在app-forms组件内的表单元素 */
.app-forms .mat-form-field-wrapper {
  padding-bottom: 10px;
}

其余两个组件分别设置独立的宿主类（如app-expansion-card、app-pagination-card），所有自定义样式都带上对应类前缀即可避免全局冲突。

方案3：全局样式统一分块覆盖 #

如果多个组件的Material样式修改逻辑可以复用，也可以把所有覆盖逻辑放到全局styles.scss文件中，按组件类做区分：

// 表单卡片组件样式
.app-forms mat-card {
  /* 自定义样式 */
}
// 折叠面板卡片组件样式
.app-expansion-card mat-card {
  /* 自定义样式 */
}
// 分页卡片组件样式
.app-pagination-card mat-card {
  /* 自定义样式 */
}

各组件不需要关闭样式封装，仅需给宿主声明对应类即可。

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