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

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 将不起作用。

根据documentation 关于ion-menu 的说法，backdrop 是暴露的CSS 阴影部分。因此，您可以使用::part() 伪元素，它允许您选择阴影树内的元素以设置它们的样式。

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

在设置 Ionic 框架样式时详细了解 CSS Shadow Parts。

编辑

Ionic 5 之前的版本中似乎没有实现 CSS 阴影部分。
您可以改写 --ion-backdrop-color 变量。

global.scss

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

在 Ionic 4 上运行良好。