通常**/deep/ “shadow-piercing”组合符可以用来强制样式下降到child components。这个选择器有一个别名〉〉〉，现在有另一个别名：：ng-deep。
由于/deep/ combinator**已过时，因此建议使用::ng-deep

• • 例如：**

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

和**css**

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

它将应用于子组件

使用方法
::ng-deep，>>>和/deep/为特定的CSS规则禁用视图封装，换句话说，它允许您访问DOM元素，这些元素不在组件的HTML中。（或任何其他类似的第三方库），某些生成的元素在组件区域之外（例如dialog），并且您不能直接访问这些元素或使用常规CSS方式访问这些元素。如果您想更改这些元素的样式，你可以使用这三种方法中的一种，例如：

::ng-deep .mat-dialog {
  /* styles here */
}

目前，Angular团队建议仅使用EMULATED视图封装进行 “深度” 操作。

压抑

• “深度”* 操作实际上也被弃用，但是它现在仍然有效，因为Angular提供预处理支持（今天不要急于拒绝::ng-deep，先看看弃用实践）。

无论如何，在采用这种方法之前，我建议您先看一下 * 禁用视图封装 * 方法（这也不是很理想，它允许你的样式泄漏到其他组件中），但在某些情况下，这是一个更好的方法，如果你决定禁用视图封装，强烈建议使用特定的类来避免CSS规则交叉，最后，避免样式表混乱。在组件的.ts文件中禁用它非常容易：

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

你可以在this文章中找到更多关于视图封装的信息。

我要强调的是，通过要求父类是封装的css类，将::ng-deep限制为组件的子类的重要性。
要实现这一点，必须在父类之后使用::ng-deep，而不是在父类之前，否则在加载组件时，它将应用于所有同名的类。
在::ng-deep之前使用:host关键字将自动处理此问题：

:host ::ng-deep .mat-checkbox-layout

或者，您可以通过在::ng-deep关键字之前添加一个组件范围的CSS类来实现相同的行为：

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

组件模板：

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

生成的（Angular 生成的）css将包含唯一生成的名称，并仅应用于其自己的组件示例：

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

确保不要错过Angular 指南中::ng-deep正上方的:host-context的说明：https://angular.io/guide/component-styles。我错过了它，直到现在，我希望我能看到它早点。
当您没有编写组件并且无法访问其源代码时，::ng-deep通常是必需的，但是当您编写组件并且无法访问其源代码时，:host-context可能是一个非常有用的选项。
例如，我设计的组件中有一个黑色的<h1>头文件，我希望当它显示在深色主题背景上时，能够将其更改为白色。
如果我没有访问源代码的权限，我可能必须在css中为父代码做以下操作：

.theme-dark widget-box ::ng-deep h1 { color: white; }

但是使用:host-context，您可以在组件 * 内部 * 完成此操作。

h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

这将查找.theme-dark组件链中的任何地方，如果找到，则将css应用于h1，这是一个很好的替代方案，可以避免过度依赖::ng-deep，后者虽然经常是必要的，但在某种程度上是一个反模式。
在这种情况下，&被h1替换（这就是sass/scss的工作原理），这样你就可以定义你的“普通”和主题化/替代性css，这是非常方便的。
请注意获取正确的:编号。::ng-deep有两个，:host-context只有一个。

只是一个更新：
您应该使用::ng-deep，而不是似乎已弃用的/deep/。
根据文件：
穿透阴影的后代组合符已被弃用，主要的浏览器和工具也将不再支持它。因此，我们计划在Angular中不再支持它（/deep/，〉〉〉和：：ng-deep）。在此之前，应该首选：：ng-deep以获得与这些工具更广泛的兼容性。
您可以找到它here

我查看了所有这些答案，发现没有人提到子组件可以从其父组件传入样式CSS。
在组件ts文件中，可以使用以下命令：

@Input() styles: any = {};

在组件html文件中，使用以下命令：

[ngStyle]="styles"

在父级中，可以使用以下命令：

<yourComponent [styles]="{backgroundColor: 'blue', 'font-size': '16px'}">

请在此处查看更多详细信息：Best way to pass styling to a component
通过这种方式，我们没有破坏封装，封装是最重要的面向对象原则之一

用途：：ng-deep。我在整个应用中使用它来设置材质设计工具栏颜色，结果发现当应用在测试时，工具栏颜色会相互影响。来看看这是因为这些样式变得全局化了，请参阅本文这里是一个工作代码解决方案，不会渗透到其他组件中。

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}