Ionic-v4 中的侧边菜单背景颜色答案

【问题标题】：Sidemenu background-color in Ionic-v4Ionic-v4 中的侧边菜单背景颜色
【发布时间】：2019-02-18 00:53:57
【问题描述】：

我有一个 Ionic-v4 应用，其侧边菜单的结构如下：

<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 的透明背景，但还是不行。

我知道我必须使用我必须使用像 --ion-background-color 这样的离子 css 变量，但是如何？

【问题讨论】：

您的要求是什么？您需要在 ion-menu 中设置背景颜色
我已将背景颜色设置为 ion-menu 但它不起作用。我只是在菜单中看到没有任何内容的背景，但 ion-header 和 ion-content 仍然是白色的。想让它透明

标签： css ionic-framework background background-color side-menu

【解决方案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;
  }
}

【讨论】：