如何为Ionic中每个激活Tab分别设置不同颜色（含图标与文字）

没问题，我来帮你搞定这个每个激活Tab显示不同颜色的需求！你已经找对了核心方向——利用aria-selected="true"属性定位激活状态的Tab，接下来只需要给每个Tab加上专属标识，再针对性编写CSS规则就能实现目标效果。

核心思路 #

Ionic的Tab激活时，对应的<ion-tab-button>会被渲染成带有aria-selected="true"属性的<a>标签，里面包含<ion-icon>和<ion-label>（对应类.tab-button-text）两个子元素。要实现每个Tab独立颜色，我们需要：

• 给每个Tab按钮添加专属标识（自定义类或利用自带的tab属性）
• 组合激活状态属性+专属标识，编写CSS分别控制图标和文字颜色

完整实现步骤 #

1. 模板部分（给Tab按钮加标识）

在你的tabs.page.html里，给每个<ion-tab-button>加上自定义类，或者直接用自带的tab属性（更省事）：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <!-- 方式1：添加自定义类 -->
    <ion-tab-button tab="tab1" class="tab-home">
      <ion-icon name="home"></ion-icon>
      <ion-label>首页</ion-label>
    </ion-tab-button>

    <!-- 方式2：直接用自带的tab属性，无需额外加类 -->
    <ion-tab-button tab="tab2">
      <ion-icon name="settings"></ion-icon>
      <ion-label>设置</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" class="tab-profile">
      <ion-icon name="person"></ion-icon>
      <ion-label>我的</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

2. CSS部分（针对性设置颜色）

在tabs.page.scss里编写规则，这里提供两种方式，选你顺手的就行：

方式A：自定义类+激活状态（结合Ionic颜色变量）

// 先在variables.scss里定义好各Tab的激活颜色
$colors: (
  tab-home-active: #ff4444, // 首页激活为红色
  tab-settings-active: #00C851, // 设置激活为绿色
  tab-profile-active: #33b5e5 // 我的激活为蓝色
);

// 首页Tab激活样式
.tab-button.tab-home[aria-selected="true"] {
  ion-icon {
    color: color($colors, tab-home-active); // 图标变色
    // 如果你确实需要图标背景色，再保留background属性，否则用color更合适
    // background: color($colors, tab-home-active);
  }
  .tab-button-text {
    color: color($colors, tab-home-active); // 文字变色
  }
}

// 设置Tab激活样式（用tab属性定位）
.tab-button[tab="tab2"][aria-selected="true"] {
  ion-icon {
    color: color($colors, tab-settings-active);
  }
  .tab-button-text {
    color: color($colors, tab-settings-active);
  }
}

// 我的Tab激活样式
.tab-button.tab-profile[aria-selected="true"] {
  ion-icon {
    color: color($colors, tab-profile-active);
  }
  .tab-button-text {
    color: color($colors, tab-profile-active);
  }
}

方式B：直接用tab属性选择器（无需额外加类）

如果不想加自定义类，直接通过tab属性定位更简洁：

// Tab1激活为红色
.tab-button[tab="tab1"][aria-selected="true"] ion-icon,
.tab-button[tab="tab1"][aria-selected="true"] .tab-button-text {
  color: #ff4444;
}

// Tab2激活为绿色
.tab-button[tab="tab2"][aria-selected="true"] ion-icon,
.tab-button[tab="tab2"][aria-selected="true"] .tab-button-text {
  color: #00C851;
}

// Tab3激活为蓝色
.tab-button[tab="tab3"][aria-selected="true"] ion-icon,
.tab-button[tab="tab3"][aria-selected="true"] .tab-button-text {
  color: #33b5e5;
}

小提示 #

你原来的CSS里给ion-icon加了background属性，这里要注意：Ionic的图标是SVG矢量图标，通常我们用color属性来控制图标的填充颜色，这才是让“图标变色”的正确方式；background是给图标添加背景色，除非你有特殊视觉需求，否则建议改成color哦。

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