如何解决离子无法更改活动段按钮颜色
我的 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;
}
解决方法
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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。