如何更改任何页面的菜单背景CSS Ionic 4



我想为每个页面更改不同的离子菜单背景,但它不起作用:

app.component.html:

<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content class="app-content" part="placeholder">
<ion-list id="inbox-list">
<ion-list-header lines="full">
<ion-avatar >
<ion-img [src]="'./assets/logo.png'"></ion-img>
</ion-avatar>
Pyramid to True Love
</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="forword" [routerLink]="[p.url]" lines="none" detail="false" >
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-app>

app.component.scss(工作(:

ion-menu ion-content{
--background: #59d36d;
} 

any.page.scs(不工作(:

ion-menu ion-content{
--background: #59d36d;
} 

这可能吗?

您可以这样使用,参考:Ionic-v4 中的侧菜单背景颜色

ion-menu {
--ion-background-color: var(--ion-color-primary);
--ion-text-color: var(--ion-color-primary-contrast);
}

最新更新