如何使用ionic-v4在ion-fab-button中添加动态背景颜色？

Answer 1

的颜色由其

--ion-color-base

属性控制。 因此，请尝试将

--ion-color-base

与

!important

属性一起使用来覆盖已定义的 CSS 属性。

但是，当我尝试使用

[ngstyle]

时，它不起作用，为了让它工作，我必须通过 CSS 文件分配它。我添加了一个示例供您参考。

HTML 模板，

<ion-fab-button color="light"  id="btnProceed"></ion-fab-button>

CSS 块

#btnProceed { --ion-color-base: #006161 !重要; }

希望这会有所帮助。

Answer 2

使用 [ngStyle] 属性。

<ion-fab vertical="bottom" horizontal="start" slot="fixed">
  <ion-fab-button [ngStyle]="{'background': currentColor}" [style.color]="isColorLight(currentColor) ? 'black' : 'white'"
    size="small">
    <ion-icon name="color-palette"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button (click)="switchColor(i)" [ngStyle]="{'background': currentColor}"
      *ngFor="let color of colors; let i = index">
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

Answer 3

你可以尝试“背景”而不是“背景颜色”，如下所示：

[样式.背景]="当前颜色"

Answer 4

万一有人看到这个，我也遇到了同样的问题，并成功地通过添加 [style] 属性和离子定义的属性 --background 来动态更改颜色：

<ion-fab-button
  [style.--background]="config.yourColor">
</ion-fab-button>

Answer 5

这里我们需要更改 Shadow DOM 的背景颜色，这操作起来很棘手。

为此，Ionic 使用 CSS 属性设计了这个影子 DOM，可以轻松更改

• 在 CSS 中

ion-fab-button {
    --background: #7c3aed
}

• JS（动态）

<IonFabButton style={{ '--background': yourColor }} />;

Answer 6

使用ionic 7，你可以尝试使用--background属性的ngStyle

<ion-fab-button [ngStyle]="{'--background': option.colorFabButton}">
  <ion-icon class="zoom-icon-option" [src]="option.icon"></ion-icon>
</ion-fab-button>