我正在使用angular-fontawesome库作为离子应用程序的一部分。我似乎无法让fa-layer-counter组件从默认的红色阴影中更改颜色。
<fa-layers [fixedWidth]="true">
<fa-icon [icon]="['far', 'bell']"></fa-icon>
<fa-layers-counter content=""></fa-layers-counter>
</fa-layers>
我试过了:
<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 {
--background-color: var(--ion-color-success) !important;
}
<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;
}
我没有主意,什么也无法工作。有任何想法吗?
第一个问题是您尝试更改--background-color
,这是一个CSS变量。无法识别此变量angular-fontawesome
。因此,您应该改为更改background-color
CSS属性。
然后这里有两件事在起作用:CSS级联和Angular视图封装。
因此,直观的方法是将类添加到<fa-layers-counter>
。它将正确添加一个类并更改<fa-layers-counter>
元素的颜色。但是问题在于实际的点是一个<span>
inside <fa-layers-counter>
,它覆盖在background-color
其父级上设置的值。
<fa-layers-counter class="color-change"> <!-- you set your colour here -->
<span class="fa-layers-counter"></span> <!-- but it is overridden on the child element by the library -->
</fa-layers-counter>
为了解决这个问题,angular-fontawesome
提供了classes
input,它允许在内部<span>
元素上分配类。
因此<fa-layers-counter [classes]="['change-color']"></fa-layers-counter>
将导致以下标记:
<fa-layers-counter>
<span class="fa-layers-counter color-change"></span>
</fa-layers-counter>
但是,由于Angular的视图封装,这仍然行不通。color-change
类是在您的宿主组件中定义的,Angular将阻止将其规则应用于fa-layers-counter
的内容(这是一个不同的组件)。为了克服这个问题,您需要告诉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;
}
这是StackBlitz上的一个工作示例:https ://stackblitz.com/edit/angular-z8v4ux-kof4dr
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句