如何在Ionic 3（iOS10/11）中为Loading Controller设置不同背景样式？

这个问题我之前做Ionic 3项目时也碰到过，核心问题是全局样式优先级太高，再加上Loading是全局弹窗，组件局部样式因为ViewEncapsulation的封装特性，根本穿透不到它。下面给你一套可行的解决方案：

1. 重构全局样式，用自定义类替代全局选择器 #

先把你app.scss里的全局.loading-ios样式改成带自定义前缀的类，这样就不会强制所有Loading都套用同一种样式，而是按需选择：

// 全屏覆盖的Loading样式
.fullscreen-loading.loading-ios {
  background-color: white;
  opacity: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

// 仅覆盖中间区域的Loading样式
.middle-loading.loading-ios {
  background-color: white;
  opacity: 1;
  position: fixed;
  top: 44px;
  bottom: 49.5px;
}

这里用组合选择器（.自定义类.loading-ios）提升了样式权重，能确保覆盖Ionic的默认样式，尽量少用!important，如果还是被默认样式覆盖，再加也不迟。

2. 创建Loading时指定对应的自定义类 #

在需要不同样式的场景里，调用loadingCtrl.create()时通过cssClass参数传入对应的类名即可：

全屏Loading场景： #

presentFullscreenLoader() {
  const loader = this.loadingCtrl.create({
    content: '正在加载...',
    cssClass: 'fullscreen-loading' // 绑定全屏样式类
  });
  loader.present();
}

中间区域Loading场景： #

presentMiddleLoader() {
  const loader = this.loadingCtrl.create({
    content: '处理中...',
    cssClass: 'middle-loading' // 绑定中间区域样式类
  });
  loader.present();
}

补充：为什么之前局部scss不生效？ #

因为Ionic组件默认开启了ViewEncapsulation.Emulated，局部scss里的样式只会作用于组件内部的DOM元素，而Loading Controller是挂载在全局ion-app下的弹窗，不在组件的DOM树范围内，所以局部样式根本穿透不到它。用全局自定义类的方式是最稳妥的，能避免关闭ViewEncapsulation带来的全局样式污染问题。

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