Ionic 3中如何为多个Popover设置不同样式

我懂你现在的痛点——直接修改theme/variables.scss里的全局变量，会让所有Popover都变成一个样子，完全没法区分不同场景的弹窗。在Ionic 3里，我们可以通过自定义CSS类+创建Popover时指定类名的方式，轻松实现不同Popover的个性化样式，具体操作如下：

1. 创建Popover时指定专属CSS类 #

当你在页面中调用popoverCtrl.create()方法创建Popover的时候，在配置参数里添加cssClass属性，给每个不同的Popover设置唯一的类名，比如：

// 创建第一个自定义样式的Popover
const popover1 = this.popoverCtrl.create(YourFirstPopoverComponent, {}, {
  cssClass: 'custom-popover-small' // 自定义类名1
});
popover1.present();

// 创建第二个自定义样式的Popover
const popover2 = this.popoverCtrl.create(YourSecondPopoverComponent, {}, {
  cssClass: 'custom-popover-large' // 自定义类名2
});
popover2.present();

2. 在全局样式文件中编写自定义样式 #

由于Popover是挂载在全局DOM结构中的，所以需要在app.scss（或者其他全局样式文件）里编写对应的类样式，来覆盖Ionic的默认样式。你可以针对不同类设置不同的宽度、圆角甚至背景色：

/* 小尺寸Popover的样式 */
.custom-popover-small .popover-content {
  width: 60%;
  border-radius: 12px;
  background-color: #f8f9fa;
}

/* 大尺寸Popover的样式 */
.custom-popover-large .popover-content {
  width: 90%;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

3. 平台专属样式适配（可选） #

如果需要针对iOS、Android（MD）、Windows平台分别调整样式，可以结合Ionic自带的平台类名来编写：

// iOS平台下的小Popover样式
.ios .custom-popover-small .popover-content {
  width: 65%;
  border-radius: 16px;
}

// MD平台下的小Popover样式
.md .custom-popover-small .popover-content {
  width: 55%;
  border-radius: 8px;
}

这样设置后，你之前在variables.scss里的全局变量会作为所有Popover的默认样式，而指定了cssClass的Popover会优先使用你自定义的样式，完美实现不同弹窗的差异化展示。

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