无法更改离子列表中离子卡的背景颜色

时间:2019-11-01 14:27:58

标签: css ionic4

我正在尝试更改离子列表中以离子卡为界的所选项目的颜色,但是所有项目的颜色都在更改。如何更改唯一选定项目的颜色。 而且,如下面的图像所示,卡的背景颜色为灰色,如何使其完全变为白色 提前致谢 这是我的代码

HTML

  <ion-list>      
<ion-card > 

     <button  inset = true *ngFor="let item of items" [class.highlight]="selected"  (click)="open($event, item.name)"  >
        <ion-card>
         <h2> <b>{{ item.name }} </b>  </h2>
          <br>    
          <p> Recommended for</p>
          {{item.Description}}
        </ion-card>
      <br>
      <br>
    </button>    
</ion-card>
</ion-list>

ts

 public open(event, item) {
    event.stopPropagation();
   // alert('Open ' + item);
   console.log(item)
   this.selected = true
  }

CSS

.highlight { 离子卡{     背景色:黑色 }

}

ion-card{
    display: flex;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
    background-color:white; 
    box-shadow: none;
  }

enter image description here

0 个答案:

没有答案