angular-fontawesome fa-layers-counter 颜色变化
angular-fontawesome fa-layers-counter color change
我正在使用 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>
我试过:
- 添加 class 以更改 SCSS 背景颜色,如下所示:
<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;
}
- 利用创建的 span 子元素(带有元素和 class 名称):
<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 variable。 angular-fontawesome
无法识别此变量。所以你应该改为 background-color
CSS 属性。
这里有两件事在起作用:CSS 级联和 Angular 视图封装。
所以直观的做法是在<fa-layers-counter>
上加一个class。它将正确添加 class 并更改 <fa-layers-counter>
元素的颜色。但问题是实际的点是 <fa-layers-counter>
内的 <span>
,它 覆盖 在其父项上设置的 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>
元素上分配 class。
所以 <fa-layers-counter [classes]="['change-color']"></fa-layers-counter>
会导致以下标记:
<fa-layers-counter>
<span class="fa-layers-counter color-change"></span>
</fa-layers-counter>
然而这仍然不起作用,因为 Angular 的 view encapsulation。 color-change
class 在您的主机组件中定义,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
我正在使用 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>
我试过:
- 添加 class 以更改 SCSS 背景颜色,如下所示:
<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;
}
- 利用创建的 span 子元素(带有元素和 class 名称):
<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 variable。 angular-fontawesome
无法识别此变量。所以你应该改为 background-color
CSS 属性。
这里有两件事在起作用:CSS 级联和 Angular 视图封装。
所以直观的做法是在<fa-layers-counter>
上加一个class。它将正确添加 class 并更改 <fa-layers-counter>
元素的颜色。但问题是实际的点是 <fa-layers-counter>
内的 <span>
,它 覆盖 在其父项上设置的 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>
元素上分配 class。
所以 <fa-layers-counter [classes]="['change-color']"></fa-layers-counter>
会导致以下标记:
<fa-layers-counter>
<span class="fa-layers-counter color-change"></span>
</fa-layers-counter>
然而这仍然不起作用,因为 Angular 的 view encapsulation。 color-change
class 在您的主机组件中定义,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