如何解决ng-deep样式渗透至其他组件的问题

方案1：给目标组件添加自定义宿主类，精准锁定样式范围 #

给需要特殊样式的模态组件添加唯一自定义类，结合:host和::ng-deep限定作用域，避免影响其他组件：

1. 在模态组件的宿主元素上添加自定义类：

<app-my-modal class="custom-template-dialog"></app-my-modal>

2. 在该组件的样式文件中编写样式：

:host.custom-template-dialog ::ng-deep .k-window-content {
  padding: 0;
}

样式只会作用在带有custom-template-dialog类的当前组件实例上，不会扩散到其他模态框。

方案2：通过组件模板内部自定义类替代ng-deep #

直接在Kendo Dialog的内容模板中给容器添加自定义类，无需使用ng-deep：

<kendo-dialog>
  <kendo-dialog-content class="no-padding-content">
    <!-- 你的模板内容 -->
  </kendo-dialog-content>
</kendo-dialog>

然后在组件样式中直接写这个类的样式：

.no-padding-content {
  padding: 0;
}

该类属于当前组件模板内的元素，Angular视图封装会自动处理样式作用域，不会渗透到其他组件。

方案3：动态给弹窗内容添加类（通过组件逻辑） #

利用ViewChild获取Kendo Dialog实例，在组件初始化时给弹窗内容元素添加自定义类，再配合样式文件：

1. 组件代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { DialogComponent } from '@progress/kendo-angular-dialog';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.component.html',
  styleUrls: ['./my-modal.component.css']
})
export class MyModalComponent implements AfterViewInit {
  @ViewChild(DialogComponent) dialog!: DialogComponent;

  ngAfterViewInit(): void {
    // 获取弹窗内容容器并添加自定义类
    const contentElement = this.dialog.content.nativeElement;
    contentElement.classList.add('custom-dialog-content');
  }
}

2. 样式文件（组件内或全局）：

.custom-dialog-content {
  padding: 0;
}

这种方式完全避免了ng-deep，通过逻辑控制样式作用范围。

方案4：利用Angular组件专属属性选择器（不推荐但可用） #

Angular会给每个组件的宿主元素生成唯一属性（如[_nghost-xyz]），可结合该属性和::ng-deep锁定样式：

:host([_nghost-xyz]) ::ng-deep .k-window-content {
  padding: 0;
}

注意：该属性值由Angular动态生成，组件重构或打包后可能变化，优先推荐前三个方案。

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