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

我有一个使用离子菜单打开汉堡菜单的离子应用程序。但是，我不想让背景在右边，如本截图所示：

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

离子菜单：

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

但它们似乎都不起作用

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

---

背景位于

离子菜单

元素的阴影树内，这意味着CSS将无法工作

根据about

ion菜单

，

背景

是一个暴露的CSS阴影部分。因此，您可以使用

：：part（）

伪元素，该元素允许您选择阴影树中的元素以设置其样式

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

了解有关设置Ionic框架样式的更多信息

编辑 看起来在爱奥尼亚5之前的版本中没有实现CSS阴影部分。
您可以替代

--ion background color

变量

global.scss

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

---

在Ionic 4上运行良好。

您好，谢谢您的回答，我已经尝试了您的解决方案，但我仍然能了解背景。恐怕此解决方案仅适用于Ionic 5，我在文档v4中似乎找不到任何与CSS阴影部分相关的内容。您可能必须依赖

：：ng deep

，即使它已被弃用。我的爱奥尼亚版本是6.3.0，是否有此版本的解决方案？我尝试了

ion-menu:：ng deep（background）

，但似乎也不起作用。可能是因为我也在使用ion-menu切换吗？我编辑了我的第一篇文章，并添加了我在控制台中打开菜单时看到的内容。当我说Ionic 5时，我指的是框架版本，而不是CLI。我已经用一个新的解决方案相应地更新了我的答案，请查看。

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