Jak zmienić kolor <ion-card> użyciu ionic2

Question

Próbuję zmienić kolor na lightgray użyłem kodu HTML, jak poniżej:

<ion-card *ngFor="let details of checkOutAddr" round inset class="ion-card"> 
    <ion-item> 
     <ion-row> 
     <ion-col><ion-icon ios="ios-create" md="md-create" item-right class="color1"></ion-icon> 
      <b>{{details.name}}</b> 
     </ion-col> 
     </ion-row> 

     <ion-row> 
     {{details.stage}} 
     </ion-row> 

     <ion-row> 
     {{details.main}} 
     </ion-row> 

     <ion-row> 
     {{details.state}} 
     </ion-row> 

     <ion-row> 
     <ion-col> 
      <ion-icon ios="ios-call" md="md-call" item-left></ion-icon> 
      {{details.phone}} 
     </ion-col> 
     </ion-row> 

     <ion-row> 
     <ion-col> 
      <ion-icon ios="ios-mail" md="md-mail" item-left></ion-icon> 
      {{details.mail}} 
     </ion-col> 
     </ion-row> 
    </ion-item> 
    </ion-card 

użyłem jak poniższy kod SCSS:

.ion-card { 
     background-color: slategray !important; 
    } 

jak uzyskać wygląd i poczuć się jak poniżej IMG:

Answer 1

Aby zrobić to w więcej Ionic2 sposób trzeba zastąpić wartość tych sass variables:

$card-ios-background-color 
$card-md-background-color 
$card-wp-background-color 

Tak, wystarczy dodać nową wartość w app/theme/app.variables.scss, tak:

$card-ios-background-color: slategray; 
$card-md-background-color: slategray; 
$card-wp-background-color: slategray; 

Answer 2

co yo co robisz, jest poprawne. Chociaż nie można zobaczyć efektu, ponieważ w znaczniku znajduje się nakładka ion-item, która ma również własne tło.

W tym przypadku można ustawić tło dla przezroczystego elementu jonizacji.

ion-item{ 
    background-color: transparent; 
} 

Albo nie realizować zmianę ion-card tło i raczej zmienić tło dla jonów pozycji.