如何更改离子弹出框的宽度

Question

我创建了离子弹出窗口。创建了一个弹出窗口页面并添加了单击按钮的操作以从主页显示弹出窗口。但我无法更改弹出窗口的宽度。下面是代码；

主页.page.html:

<ion-content>
  <ion-button expand="full" (click)="openPopover($Event)">Open popover</ion-button>
</ion-content>

主页.page.ts：

async openPopover(ev: Event) {
 const popover = await this.popoverController.create({
   component:PopoverPage,
   componentProps: {
     custom_id: this.value
   },  
 });
 popover.present();    
}

popover.page.html：

<ion-content>
  <ion-list>
    <ion-item>
      this is popover
    </ion-item>
    <ion-item button color="danger" (click) = "closePopover()">
      <ion-icon name="close" slot="start"></ion-icon>
      Close Popover
    </ion-item>
  </ion-list>
</ion-content>

弹出框.page.ts：

closePopover() {
  this.popoverController.dismiss();
}

请帮助我如何更改弹出窗口的宽度，因为我尝试将自定义 css 添加到弹出窗口页面的离子内容，但它不起作用。

Answer 1

另一种方法对我不起作用，需要进行以下更改：

首先.contact-popover .popover-content{ width: 320px; }内容需要在global.scss

这意味着任何自定义样式都需要放入全局样式表文件中。在 Ionic Angular 启动器中，这可以是 src/global.scss 文件，或者您可以通过添加到 Angular 中的样式构建选项来注册新的全局样式文件。 json。” （文档中说）

其次，CSS 不能width，但必须如此--width。其自定义 css 属性位于此底部： https: //ionicframework.com/docs/api/popover

Answer 2

对于 ionic 6.x，解决方案是

ion-popover {
  &::part(content) {
    min-width: 230px;
  }
}