在Ionic-v4的Sidemenu背景颜色

Question

我有一个Ionic-v4-app,侧面菜单结构如下:

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
        </ion-list>
      </ion-content>
    </ion-menu>
  </ion-split-pane>
</ion-app>

现在我希望有整个侧面菜单的背景(标题,列表,内容,一切).

但我没有必要尝试,我不知道它是如何工作的.

我尝试了背景颜色ion-menu和透明背景header和content,也没有工作.

我知道我必须使用我必须使用离子css变量--ion-background-color,但如何？

Answer 1

我相信下面的解决方案会帮助你:-)

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

  ion-toolbar {
    --background: var(--ion-color-primary);
  }

  ion-list {/* optional, but it needs when you use gradient as a background color.*/
    background: transparent;
  }
}