Ionic 5 Popover 弹出箭头

Question

我正在使用 Ionic5，我想创建一个弹出窗口，ios 有我想要在 android 中类似的弹出窗口，问题是当弹出窗口出现时，工具提示不清晰可见，因为它位于离子覆盖层后面（我猜）。如果我在浏览器的 popover-arrow 类检查中将 z-index 的值更改为 12，它会按预期工作，下面是 ts 和 global.scss 的代码

Ts文件

async presentExpirationPopOver(event: any) {
        this.popover = await this.popoverCtrl.create({
          component: PopoverComponent, // Pass the ng-template reference here
          event,
          mode: 'ios',
          cssClass: 'custom-pop-over',
          showBackdrop:false,
          arrow:true,
        });
        await this.popover.present();
      }
    
    
    
    

SCSS

.custom-pop-over {
  --min-width: 240px;
  --max-width: 260px;
  --border-radius: 6px;
  --border: 1px solid #d0d2d3;
  --padding: 5px;
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  

  .popover-wrapper{
    .popover-arrow {
      z-index: 12 !important;  
      }
  }
}

Answer 1

你可以尝试使用阴影部分：

.custom-pop-over::part(arrow){
  z-index:12;
}