如何在Ionic中修改选中ion-label标签的颜色？

问题分析 #

1. ion-label 组件本身并没有内置 --color-selected 这个CSS自定义属性，该属性通常用于Ionic的表单控件（如ion-toggle、ion-checkbox），所以你设置这个变量不会生效。
2. 你的点击事件仅打印内容，没有给选中的标签添加选中状态标识，CSS无法区分哪个标签是被选中的。

解决方案 #

通过添加选中类的方式实现选中标签的颜色变化，具体步骤如下：

1. 修改TS代码，记录选中的日期

selectedDay: string;

dayName(day: string) {
  this.selectedDay = day;
}

2. 修改HTML模板，绑定选中类

把点击事件传递的$event改成具体的item.day，同时用[class.selected]绑定选中状态（注意移除重复的id="daysName"，避免违反HTML规范）：

<ng-container *ngFor="let item of daily"> 
  <ion-label 
    class="favorites-label" 
    (click)="dayName(item.day)"
    [class.selected]="selectedDay === item.day"
  >
    {{item.day}}
  </ion-label>   
</ng-container>

3. 修改CSS，针对选中类设置颜色

ion-label.favorites-label {
  color: white;
}

ion-label.favorites-label.selected {
  color: red; /* 选中时的颜色 */
}

点击标签时，选中的元素会自动添加selected类，CSS就能正确修改其颜色了。

内容的提问来源于stack exchange，提问作者RAWAN