我的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;
}
结果是:
2条答案
按热度按时间rryofs0p1#
The challenge you are experiencing has to do with the shadow DOM.
您可以使用如下代码穿透阴影DOM:
尽管这可能有点太全球化了。
可能ng-deep可以工作并且更有针对性。
epfja78i2#
下面的css代码在我的ion6中运行良好