Ионные 4 вкладки, как изменить цвет фона выбранных вкладок

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

Просто используйте это в вашей вкладке SCSS в Ionic 4,

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

Answer 3

Я сделал это на variables.scss :

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