Ionic：如何在ion-menu中隐藏背景？

Question

我有一个使用ion-menu打开汉堡菜单的Ionic应用程序。然而，我不想在右侧看到背景，如此屏幕截图所示：

我希望得到这个（去掉背景）：

ion-menu：

<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;
}

但是它们似乎都不起作用。

编辑：当我打开菜单时，控制台中显示的内容如下。

- vdvaxel

Answer 1

backdrop位于ion-menu元素的影子树中，这意味着CSS无法生效。

根据有关ion-menu的文档，backdrop是一个公开的CSS Shadow Part。因此，您可以使用::part()伪元素来选择影子树内部的元素以进行样式设置。请注意，::part()允许您在影子树内部选择元素进行样式设置。

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

了解更多关于在 Ionic Framework 中进行样式设计时的 CSS Shadow Parts。

编辑

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

global.scss

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

在Ionic 4上运行良好。

- Reqven

---

嗨，谢谢你的回答。我尝试了你的解决方案，但是背景仍然出现。 - undefined

很抱歉，这个解决方案只适用于Ionic 5，在v4的文档中似乎找不到与CSS Shadow Parts相关的内容。即使它已被弃用，你可能还是需要依赖::ng-deep。 - undefined

我的Ionic版本是6.3.0，这个版本有解决方案吗？我尝试了ion-menu::ng-deep(backdrop)，但似乎也不起作用。 - undefined

可能是因为我也在使用ion-menu-toggle吗？我已经编辑了我的初始帖子，并添加了当我打开菜单时在控制台中看到的内容。 - undefined

当我说Ionic 5时，我指的是框架版本，而不是CLI。我已经根据新的解决方案更新了我的答案，请查看一下。 - undefined