当 ion-tab-button 处于活动状态时，如何更改图标的颜色？ CSS 离子答案

【问题标题】：How can i change the color of my icon when ion-tab-button is active? CSS Ionic当 ion-tab-button 处于活动状态时，如何更改图标的颜色？ CSS 离子
【发布时间】：2019-08-29 00:34:25
【问题描述】：

我正在使用 Ionic 4.12 我正在使用选项卡组件，我想在激活该选项卡时更改我的 ion-icon svg 的颜色。我正在尝试更改 ion-tab-button 的 shadow dom，因为文档显示

--颜色选择

--以背景为中心

在css中，但它没有改变它

标签条码

<ion-tab-bar slot="bottom">
<ion-tab-button tab="mainview">
  <ion-icon src="assets/logo/mainView.svg"></ion-icon>
  <ion-label>INDICADORES</ion-label>
</ion-tab-button>

<ion-tab-button tab="profile">
  <ion-icon src="assets/logo/profile.svg"></ion-icon>
  <ion-label>PERFIL</ion-label>
</ion-tab-button>

<ion-tab-button tab="">
  <ion-icon src="assets/logo/phone.svg"></ion-icon>
  <ion-label>LLAMAR</ion-label>
</ion-tab-button>

<ion-tab-button tab="caregivers">
  <ion-icon src="assets/logo/doc.svg"></ion-icon>
  <ion-label>CUIDADORES</ion-label>
</ion-tab-button>

<ion-tab-button tab="help">
  <ion-icon src="assets/logo/help.svg"></ion-icon>
  <ion-label>AYUDA</ion-label>
</ion-tab-button>

图标的当前css

ion-tab-button{
font-size: 10px;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}

【问题讨论】：

介意添加标签代码吗？
刚刚编辑，谢谢提醒
你的离子信息是什么？我尝试了你的代码，它在 4.12 上也有效

标签： html css ionic-framework

【解决方案1】：

ion-tab-button{
font-size: 10px;
--background-focused: #a0a;
--color-selected: #a0a;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}}

这是正确的离子方式

【讨论】：

我在没有 !important 值的情况下使用它，所以由于某种原因它没有工作，现在它以离子方式工作，谢谢

【解决方案2】：

如果您想在课程处于活动状态时提供另一种颜色，您只需执行以下操作：

.class:active {
    color: blue; 
}

但是，在您的情况下，这将是：

ion-tab-button:active{
    color: blue;
}

颜色属性也适用于十六进制和 RGB 代码（更多信息请参见https://www.w3schools.com/cssref/css_colors_legal.asp）

我还建议您查看此帖子，因为这与您目前遇到的问题有关。 Editing Ionic tab icon styles

【讨论】：

【解决方案3】：

这是下面的 CSS，如果我们需要将样式仅应用于特定页面，我们需要在组件级 CSS 中添加它。

使用focus伪类，我们可以将样式应用到选中的ion-tab-button

ion-tab-button:focus {
    ion-icon, ion-label {
        color: var(--ion-color-primary) !important;
        --ion-color-base: var(--ion-color-primary) !important;
    }
}

【讨论】：

【解决方案4】：

您可以为选定的选项卡提供自定义 CSS。每当您选择选项卡时，“选项卡选择”类都会添加到 ion-tab-button 中。

.tab-selected {
  border-bottom: 5px solid blue;
}

【讨论】：

【解决方案5】：

还有另一种方法可以在 ionic 中自定义标签。（我的离子版本 6.12.0）

ion-tab-bar{
    background-color: white;
    overflow-x: auto;
    border:0px;
}

ion-tab-bar > ion-tab-button {
 
  border-radius: 20px 20px 20px 20px;
}

ion-tab-button[aria-selected=true] {
    color:white;
    background-color: #3689ef;
 }

 
 ion-tab-bar  ion-tab-button[aria-selected=true]:first-child {   
    border-radius: 0px 20px 20px 0px;
 }
 ion-tab-bar  ion-tab-button[aria-selected=true]:last-child {
  
    border-radius: 20px 0px 0px 20px;
 }

【讨论】：

【解决方案6】：

这比它应该的更难弄清楚，但这对我有用：

In theme/variables.css

:root {

  /*put at the bottom after all other base styles*/
  --ion-tab-bar-color: #2a3042;
  --ion-tab-bar-color-selected: #556ee6;

}

【讨论】：