如何使用 ionic2 更改 <ion-card> 的颜色答案

【问题标题】：How to change the color of <ion-card> using ionic2如何使用 ionic2 更改 <ion-card> 的颜色
【发布时间】：2016-12-31 02:50:42
【问题描述】：

我正在尝试将颜色更改为浅灰色，我使用的 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

我使用的scss代码如下：

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

我如何获得如下 img 的外观：

【问题讨论】：

标签： angular typescript ionic2 ionic3

【解决方案1】：

为了以更多 Ionic2 的方式进行，您需要替换这些 sass variables 的值：

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

因此，您只需在app/theme/app.variables.scss 中添加新值，如下所示：

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

【讨论】：

谢谢它工作正常我还需要像我的图像一样对齐文本。我在需要更改 scss 的地方苦苦挣扎。
恐怕需要手动完成类似.ion-card { text-align: left; }

【解决方案2】：

你所做的是正确的。虽然您看不到效果，因为您的标记中有一个覆盖的ion-item，它也有自己的背景。

所以这里的情况是您可以将离子项目的背景设置为透明。

ion-item{
    background-color: transparent;
}

或者不要追求改变ion-card的背景，而是改变ion-item的背景。

【讨论】：