全局刺穿组件样式

Question

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

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

时，我想将样式更改为垫卡

想法是：

全球-styles.scss

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

host-context 好像是个好主意，我试了一下

自定义-component.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

Answer 2

好的，这不是解决方案，但需要考虑一件事。

如果您想使用选择器 your-component 将样式应用到您的组件，您必须在您的组件 :host 中设置 display: block; 属性。我完全错过了这个，但它看起来像这样：

你的-component.css

:host {
  display: block;
}

你的父组件css

your-component ~ your-component {
  margin-top: 15px;
}

并且有效。我的问题原来与此有关。

Pierce component style globally