Ionic 4如何正确修改Popover组件popover-content的CSS样式

问题复现代码 #

Popover调用逻辑：

async presentPopover(ev: any) {
    this.popover = await this.popoverController.create({
      component: MenuComponent,
      event: ev,
      translucent: true,
      backdropDismiss: true,
      keyboardClose: true,
      animated: false,
      cssClass: 'menu-popover',
      componentProps: {
        popover: this.popover
      }
    });
    return await this.popover.present().then(() => this.removeOverflow());
  }

Popover内容组件（MenuComponent）模板：

<ion-content id="popover">
  <ion-row class="button-menu" *ngFor="let option of options">
    <ion-col class="ion-text-center" (click)="getFunction( option)">
      <img [src]="option.image" class="menu-icon" *ngIf="option.image">
      <span class="bold">
        <i class="fas" [ngClass]="option.icon" *ngIf="option.icon"></i>
        {{option.text | translate}}
        <span *ngIf="option.index">{{option.index}}</span>
      </span>
    </ion-col>
  </ion-row>
  <ion-row class="button-menu footer">
    <ion-col class="justify-center">
      {{ 'VERSION' | translate }}:&nbsp;{{version}}
    </ion-col>
  </ion-row>
</ion-content>

渲染时Ionic会自动生成Popover内置DOM结构，直接修改popover-content宽度样式不生效，实际渲染效果：

失效原因 #

1. Ionic 4的Popover默认挂载在全局ion-app根节点下，不属于当前业务页面、MenuComponent的DOM子树，组件内开启了作用域隔离的样式无法命中Popover内置节点
2. Ionic内置组件自带默认样式，普通选择器的优先级不足以覆盖框架默认值

正确修改方式 #

• 把Popover相关自定义样式写到全局样式文件（默认路径为src/global.scss），不要写在业务页面或者MenuComponent的样式文件中
• 借助创建Popover时配置的自定义类menu-popover作为样式命名空间，避免污染全局其他Popover样式，优先使用框架提供的CSS变量实现定制，示例代码：

// 写入src/global.scss
.menu-popover {
  // 框架原生支持的宽度变量，优先使用，适配组件默认布局逻辑
  --width: 280px;
  // 需要细粒度调整内置节点样式时，直接追加内部类选择器即可
  .popover-content {
    border-radius: 12px;
    --min-height: 200px;
  }
  // 自定义内容区的样式也可在此处统一配置
  #popover {
    --padding-top: 0;
    --padding-bottom: 0;
    .button-menu {
      padding: 12px 0;
    }
  }
}

• 注意：Angular版本下不要在组件样式中用::ng-deep、:host穿透编写Popover样式，这类样式的作用域依然被限制在当前组件DOM范围内，无法命中挂载在根节点的Popover元素。

内容的提问来源于stack exchange，提问作者rafaelpadu