用Ionic2改变风格

时间:2017-10-17 05:30:04

标签: typescript sass ionic2

我需要你对ionic2的支持。问题是sass样式对此代码中的视图没有影响:

$verde : #89ce4b;
$amarillo : #ece04e;
$rojo : #f15959;
$gris : #aaa;

ion-icon[name="checkmark-circle"]{color:$verde;}
ion-icon[name="close-circle"]	{color:$rojo;}
ion-icon[name="alert"] {color:$amarillo;}
ion-icon[name="arrow-dropright-circle"] {color:$gris;}
<ion-list *ngFor="let insp of Lista">
			<button ion-item>
				<ion-label>{{insp.desc}}	  
				<ion-icon name="{{insp.icono}}"></ion-icon>
				</ion-label>
			</button>
</ion-list>

例如,如果"insp.icono" = "checkmark-circle",则必须为"$verde" = #89ce4b。但图标始终以默认颜色(灰色)显示。我能做什么?

1 个答案:

答案 0 :(得分:1)

当您使用数据绑定绑定图标时,Ionic会附加不同的属性。

您需要更新scss以使用ng-reflect-name而不是名称。

示例:

ion-icon[ng-reflect-name="heart"] {
  color: green;
}