应用十六进制值颜色style.background-color

Question

我试图在我的导航栏上使用离子色，但我没有运气。这是我的代码。

 <ion-header>
   <ion-navbar [style.color]="(xdg|async)?.color">//outputs hex ex. #dda63a
     <ion-title>xdg</ion-title>
   </ion-navbar>
</ion-header>

但它不适用于导航栏。我也尝试在navParams中传递数据：

//<ion-navbar [style.color]="xdgColor">
this.xdgColor = this.navParams.get('xdgColor')
console.log(this.xdgColor)//#dda63a

也没有运气，我做错了什么？

Answer 1

<强> .TS

<ion-header>
   <ion-navbar [style.background-color]="xdgColor">
     <ion-title>xdg</ion-title>
   </ion-navbar>
</ion-header>

离子在离子导航栏中创建另一个div来设置背景颜色。您可以通过将以下css添加到 app.scss 文件来覆盖此内容：

.header .toolbar-background{
    background: none;
}

现在，由于您已禁用离子设置的背景颜色，因此您可以通过将此css添加到 app.scss

ion-navbar.toolbar
    background-color: #f8f8f8;
}