离子无法更改活动段按钮颜色

Question

我的 Ionic 5 和 Angular 应用程序有一个小问题。
所以在这里，我有一个离子段，但我不可能更改 active/checked 段按钮的背景颜色。
除了官方文档，我尝试了很多在论坛上阅读的不同方法，但仍然不可能。
你能帮帮我吗？

我的离子段 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>

home.scss 中段的 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; 
}

结果：

Answer 1

The challenge you are experiencing has to do with the shadow DOM.

你可以用类似的东西来穿透阴影 DOM：

::part(indicator-background) {
  background-color: #2D303A;
}

虽然这对全球来说可能有点。

可能 ng-deep 可能有效并且更有针对性。

.segment-button-checked ::ng-deep{
  background-color: #2D303A;
}

离子无法更改活动段按钮颜色

Ionic unable to change active segment button color

version-control

properties

segment

ionic-framework

angular