我想为每个页面更改不同的离子菜单背景,但它不起作用:
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);
}