Ionic：在离子菜单中隐藏背景

Question

我有一个 Ionic 应用程序，使用离子菜单来打开汉堡菜单。但是，我不想让背景位于右侧，如屏幕截图所示：

我想要的是这个（没有背景）：

离子菜单：

<ion-menu side="start" type="push" menuId="first" contentId="main" class="burger-menu">...</ion-menu>

我已经尝试过 CSS 中的所有内容：

.burger-menu {
  // Doesn't work
  --backdrop: none !important;
  backdrop-filter: none !important;
}

// Doesn't work
ion-menu#backdrop {
  display: none !important;
}

// Doesn't work
ion-menu > ion-backdrop {
  display: none !important;
}

// Doesn't work
ion-backdrop.menu-backdrop {
  display: none !important;
}

// Doesn't work
:host(.menu-type-push) .show-backdrop {
  display: none !important;
}

但它们似乎都不起作用。

编辑：这是我打开菜单时在控制台中看到的内容。

Answer 1

backdrop位于元素的影子树内部，这ion-menu意味着 CSS 将不起作用。

根据有关的文档ion-menu，这backdrop是一个被暴露的 CSS Shadow Part。因此，您可以使用::part()伪元素，它允许您选择影子树内部的元素以设置它们的样式。

ion-menu::part(backdrop) {
    background-color: transparent;
}

了解有关Ionic 框架样式时CSS 阴影部分的更多信息。

编辑

看起来 Ionic 5 之前的版本中没有实现 CSS Shadow Parts。
您可以改写该--ion-backdrop-color变量。

全局.scss

:root {
  ion-menu {
    --ion-backdrop-color: transparent;
  }
}

在 Ionic 4 上运行良好。