通过要求父类是一个封装的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;
}

通过要求父类是一个封装的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;
}

通常/deep/ " shadow- penetrating "组合符可以用来强制一种样式到子组件。这个选择器有一个别名>>>，现在有了另一个名为::ng-deep的别名。

由于/deep/组合子已弃用，建议使用::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/，这似乎是不推荐的。

每个文档:

暗影穿透的后代组合子已弃用，支持是 从主流浏览器和工具中删除。因此，我们打算放弃 Angular中的支持(支持/deep/、>>>和::ng-deep中的所有3个)。直到 那么::ng-deep应该优先用于更广泛的兼容性 的工具。

你可以在这里找到它

确保不要错过angular指南:https://angular.io/guide/component-styles中::ng-deep上面的:host-context的解释。直到现在我都没看到，真希望我能早点看到。

::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只有一个。

我浏览了所有这些答案，发现没有人提到子组件可以从父组件传递样式CSS。

在组件的文件中，你可以这样做:

   @Input() styles: any = {};  

在组件html文件中，你使用这个:

[ngStyle]="styles"

在parent中，你可以这样使用:

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

请在这里查看更多细节:将样式传递给组件的最佳方式

通过这种方式，我们没有破坏封装，这是最重要的面向对象原则之一