如何设置每个 ion-popover 的大小

Question

我有不止一个 ion-popover。我想为每个人设置大小。我研究了这个问题，我尝试了所有方法，但我做不到。但是，我成功地在 variables.scss 中全局更改了大小，但不是单独更改。有谁知道如何设置每个 ion-popover？ P.s 我正在使用 ionic 5 和 angular

这只是我能做的，在全球范围内改变。 这是我在 variables.scss

中添加的

    ion-popover {
  .popover-wrapper {
   .popover-content {
     width: fit-content;
   }
  }
}

Answer 1

ion-popover 有一个名为cssClass 的属性。您可以为每个类分配唯一的类，然后从here 提到的任何位置定位它。

 async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true
    });
    return await popover.present();
  }

现在您可以执行以下操作（通知&.my-custom-class）：

ion-popover {
&.my-custom-class {
  .popover-wrapper {
   .popover-content {
     width: fit-content;
   }
  }
}
}