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

Question

我的 Ionic 5 和 Angular 应用程序有一个小问题。
所以在这里，我有一个离子段，但我无法更改处于活动/选中状态的段按钮的背景颜色。
除了官方文档之外，我尝试了许多在论坛上阅读的不同方法，但仍然是不可能的。
你能帮帮我吗？

我 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.

你可以用类似这样的东西来穿透 shadow DOM：

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

虽然这可能有点全球化。

ng-deep 可能会起作用并且更有针对性。

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