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

Question

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

\n

我的 home.html 中的离子段：

\n

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

\n

home.scss 中该段的 SCSS：

\n

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

\n

结果：
\n

\n

Answer 1

您遇到的挑战与影子 DOM 有关。

你可以用类似下面的方法来刺穿影子 DOM：

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

尽管这可能有点全球化。

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

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