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

hgc7kmma  于 2023-03-11  发布在  Ionic
关注(0)|答案(2)|浏览(183)

我的Ionic 5和Angular应用程序有个小问题。
这里有一个离子段,但我无法更改激活/选中的段按钮的背景颜色。
除了官方文件,我尝试了许多不同的方法阅读论坛,但它仍然是不可能的。
你能帮帮我吗?
在我的主页. 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; 
}

结果是:

rryofs0p

rryofs0p1#

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;
}
epfja78i

epfja78i2#

下面的css代码在我的ion6中运行良好

ion-segment {
background-color: rgb(3, 3, 63);

  ion-segment-button {
    color: rgb(119, 119, 115);
        }

  .segment-button-checked {
    color: #F8CF80 !important; // it works properly 
    
    background-color: #023b21de !important; 
  
  }

}

相关问题