css - 全局刺穿组件样式

Question

我需要从全局 styles.scss 文件中穿出我的组件的样式。

基本上，我使用了包裹在 custom-component 中的 mat-card 组件。在在某些情况下，当自定义组件前面有另一个 custom-component

时，我想将样式更改为 mat-card

想法是:

全局样式.scss

custom-component ~ custom-component::ng-deep { 
    .mat-card {
       background-color: red;
    }
}

host-context 似乎是个好主意，我尝试过这种方式

自定义组件.scss

// does not work
host-context(~custom-component) { background-color: red; }

我试过这个和其他一些组合，但它们似乎不起作用。我们应该如何使用 >、~、+ 选择器来设置 Angular 组件的样式？

干杯

Answer 1

就我个人而言，我会不惜一切代价避免刺穿选择器。它打破了整个组件模型，并将代码紧密耦合。

我会以稍微不同的方式处理这个问题。我会让我的 custom-component 有一个可选的 Input() embedded = false

您的用法可能如下:

// top level
<custom-component></custom-component>

// nested level
<custom-component [embedded]="true"></custom-component>

然后使用 ngClass 和 embedded 属性来触发颜色变化。

有关 ngClass 的更多信息，请参阅文档 https://angular.io/api/common/NgClass