如何更改活动离子标签的颜色？答案

【问题标题】：How do I change the color of an active ionic tab?如何更改活动离子标签的颜色？
【发布时间】：2017-04-18 03:45:37
【问题描述】：

我正在尝试将活动离子标签的背景颜色从白色更改为绿色。我找到了这个帖子，但似乎答案不再起作用了：

https://forum.ionicframework.com/t/change-color-of-active-state-in-tab-icons/12547

有人知道怎么做吗？

谢谢。

【问题讨论】：

标签： ionic-framework

【解决方案1】：

像这样为.tab-item-active类添加样式

.tab-item-active {
    background:green;
}

查看此代码笔：http://codepen.io/edisonpappi/pen/aWvmjz

【讨论】：

【解决方案2】：

对我来说，为“.activated”类设置 CSS 规则是可行的。

.activated {
   background-color: blue;
}

这个类被暂时应用到被选中的标签项上。

【讨论】：

我会将范围缩小到应用于选项卡元素的 .activated 类。

【解决方案3】：

这可以通过以下方式完成：

Ionic 具有以下 css：

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    opacity: 1;
}

您需要按如下方式覆盖它：

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    color: red;
}

【讨论】：

【解决方案4】：

您还可以在 theme/variables.scss 中使用 SCSS $tabs-ios-tab-icon-color-active var，例如：

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$tabs-ios-tab-icon-color: #00f;
$tabs-ios-tab-icon-color-active: #f00;


// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$tabs-md-tab-icon-color: #00f;
$tabs-md-tab-icon-color-active: #f00;

这会给你这样的东西：

更多信息，请查看here。

希望能有所帮助。

【讨论】：