Angular 角形Fontfa层计数器颜色变化

我正在使用这个库作为ionic应用程序的一部分。我似乎无法让fa层计数器组件改变默认红色阴影的颜色

<fa-layers [fixedWidth]="true">
    <fa-icon [icon]="['far', 'bell']"></fa-icon>
    <fa-layers-counter content=""></fa-layers-counter>
</fa-layers>

我试过：

添加类以更改SCSS背景色，如下所示：

.颜色变化{
--背景色：var（--离子色成功）！重要；
}

点击创建的span子元素（使用元素和类名）：

.color change>.fa图层计数器{
--背景色：var（--离子色成功）！重要；
}

内联样式

使用背景颜色以外的样式

---

我没有主意了，什么也做不到。有什么想法吗？

第一个问题是，您试图更改背景色，这是一种颜色。

系统无法识别此变量。因此，您应该更改
背景色
CSS属性

然后这里有两件事在起作用：CSS级联和角度视图封装

因此，直观的方法是向
添加一个类。它将正确添加一个类并更改
元素的颜色。但问题是，实际的点是
内部的
，它覆盖了在其父对象上设置的
背景色



为解决此问题，
提供了一个类，它允许在内部
元素上分配类

因此，
将导致以下标记：



然而，这仍然不起作用，因为角度的<代码>颜色更改
类是在主机组件中定义的，Angular将阻止其规则应用于
fa层计数器的内容（这是另一个组件）。要克服这一点，您需要告诉Angular，您实际上希望将其应用于另一个组件的内容。最终解决方案如下所示：

<fa-layers-counter [classes]="['change-color']"></fa-layers-counter>

/* :host is a small precaution, to ensure that .change-color is only applied in the host's subtree. This is not required, but makes it less likely for `.change-color` class rules to leak in the unexpected place. */
:host ::ng-deep .change-color {
  background-color: green;
}


/*：主机是一个小的预防措施，以确保.change color仅应用于主机的子树。这不是必需的，但会降低“.change color”类规则在意外位置泄漏的可能性*/
：主机：：ng深。更改颜色{
背景颜色：绿色；
}

下面是StackBlitz的一个工作示例：
如果您不想使用默认颜色，为什么不使用通用的
标记呢？我想要标记附带的所有其他内容-位置、大小、内容等。
<fa-layers [fixedWidth]="true">
    <fa-icon [icon]="['far', 'bell']"></fa-icon>
    <fa-layers-counter content="" class="color-change"></fa-layers-counter>
</fa-layers>

.color-change > .fa-layers-counter {
    --background-color: var(--ion-color-success) !important;
}

<fa-layers-counter [classes]="['change-color']"></fa-layers-counter>

/* :host is a small precaution, to ensure that .change-color is only applied in the host's subtree. This is not required, but makes it less likely for `.change-color` class rules to leak in the unexpected place. */
:host ::ng-deep .change-color {
  background-color: green;
}