typescript 如何使用ionic2改变<ion-card>的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39115340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the color of <ion-card> using ionic2
提问by Lavanya Parvathi
I am trying to change the color of to lightgray I used the html code as below:
我正在尝试将 的颜色更改为浅灰色 我使用的 html 代码如下：
<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
I used the scss code as below:
我使用的 scss 代码如下：
.ion-card {
background-color: slategray !important;
}
How do i get the look and feel as below img:
我如何获得如下 img 的外观和感觉：
采纳答案by sebaferreras
In order to do it in a more Ionic2 wayyou need to replace the value of these sass variables:
为了以更 Ionic2 的方式执行此操作，您需要替换这些sass 变量的值：
$card-ios-background-color
$card-md-background-color
$card-wp-background-color
So, you just need to add the new value in app/theme/app.variables.scss, like this:
因此，您只需要在 中添加新值app/theme/app.variables.scss，如下所示：
$card-ios-background-color: slategray;
$card-md-background-color: slategray;
$card-wp-background-color: slategray;
回答by Adrian
What you are doing is correct.
Though you can't see the effect because there is an overlaying ion-itemin your markup which has also its own background.
你在做什么是正确的。虽然您看不到效果，因为ion-item您的标记中有一个叠加层，它也有自己的背景。
So the case here is you can set the background for the ion-item to be transparent.
所以这里的情况是你可以将 ion-item 的背景设置为透明。
ion-item{
background-color: transparent;
}
Or don't pursue changing the ion-cardbackground and rather change the background for ion-item.
或者不要追求改变ion-card背景，而是改变ion-item的背景。
