2021年4月1日星期四

Ionic unable to change active segment button color

I have a small problem with my Ionic 5 and Angular application.
So here it is, I have an ionic segment but it is impossible for me to change the background colour of the segment button that is active/checked.
In addition to the official documentation, I tried many different methods read on forums but it remains impossible.
Can you help me?

ion-segment in my home.html :

<ion-segment value='favorites' [(ngModel)]="segmentModel" (ionChange)="segmentChanged($event)" color="maindark" mode='ios' swipeGesture='true' scrollable='true'>      <ion-segment-button value="favorites">        <ion-label>Favoris</ion-label>      </ion-segment-button>      <ion-segment-button value="settings">        <ion-label>Paramètres</ion-label>      </ion-segment-button>  </ion-segment>  

SCSS of the segment in home.scss :

ion-segment {    padding: 5px 0 5px 0;    margin: 5vh 15vw 0 15vw;    background-color: #2d303aab;  }    ion-segment-button {    padding: 7px 0 7px 0;    font-size: 16px;    color: white;  }    .segment-button-checked {    color: #F8CF80 !important; // it works properly       // Tried all of that but nothing work    background-color: #2D303A !important;     background: #2D303A !important;     --background: #2D303A !important;     --background-color: #2D303A !important;     --background-checked: #2D303A !important;   }  

the result :
The result

https://stackoverflow.com/questions/66910440/ionic-unable-to-change-active-segment-button-color April 02, 2021 at 03:25AM

没有评论:

发表评论