Question

有人可以帮助我吗：我已经在“ global.scss”中添加了它

.tab-btn-selected {
    background: rgb(134,31,194);
    color: rgb(134,31,194);
    --color-selected: rgb(134,31,194);
}

.tab-btn-selected[aria-selected=true] {
    color: #fff; /*your  text color */
    background: rgb(134,31,194); /* your background color*/
}

但没有任何改变。

Answer 1

我正在将ionic 4与stenciljs一起使用。未选中时，我的<ion-tab-button/>具有以下班级列表：

class="tab-has-icon tab-has-icon-only tab-layout-icon-bottom hydrated"

然后选择时：

class="tab-has-icon tab-has-icon-only tab-layout-icon-bottom hydrated tab-selected"

我的组件具有以下属性：

@Component({
  tag: 'app-task',
  styleUrl: 'app-task.css'
})

所以我在app-task.css中添加了以下内容，并能够更改字体和背景颜色：

.tab-selected{
  background: rgb(134,31,194) !important;
  color: white !important;
}

Answer 2

我是在 variables.scss 上完成的：

--ion-tabbar-text-color-active: rgb(134,31,194);

Answer 3

只需在Ionic 4的标签页SCSS中使用它，

ion-tab-bar{
    --color-selected: #000 !important; ( use your favourite color instead of #000 ).
}

Answer 4

在带有角度8的离子4中，我可以在这样的Web浏览器中使用它（未经移动设备测试）：

在global.css中我添加了：

ion-tab-button {
  --ripple-color: var(--ion-color-medium);
  --color: var(--ion-color-dark);
  --color-selected: var(--ion-color-medium);
}

ion-tab-button.tab-selected {
  --background: var(--ion-color-dark) !important;
  --color-selected: var(--ion-color-light);
}

Answer 5

HTML

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="index">
      <ion-icon name="list"></ion-icon>
      <ion-label>Lessons</ion-label>
    </ion-tab-button>

    <ion-tab-button class="favorites-button" tab="favorites">
      <ion-icon name="heart"></ion-icon>
      <ion-label>Favorites</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

SCSS

ion-tab-button.favorites-button {
    --color-selected: red;
}

Answer 6

以下内容对我有用

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

ionic 4选项卡如何更改所选选项卡的背景颜色

6 个答案: