如何在Ionic 3特定页面重写Alert控制器及解决SCSS不生效问题

嗨，我来帮你拆解下这个问题~ 在Ionic 3里页面SCSS中的.alert-md样式不生效，核心原因是Angular的样式封装机制在起作用：

为什么样式不生效？ #

Ionic 3基于Angular构建，每个页面组件默认启用了ViewEncapsulation.Emulated（样式模拟封装）。这个机制会给当前页面内的所有DOM元素添加一个独特的属性（比如_ngcontent-abc123），同时把页面SCSS里的选择器自动改写，只匹配带有这个属性的元素。

但Alert控制器创建的弹窗是挂载在全局的ion-app或者body节点下，不属于当前页面组件的DOM结构，自然没有那个独特的属性，所以页面SCSS里的.alert-md选择器根本匹配不到它，样式也就不会生效。

解决办法 #

这里给你几个靠谱的方案，按需选择：

1. 把样式放到全局SCSS文件中 #

把.alert-md的样式移到项目根目录的src/app/app.scss里（这是Ionic的全局样式文件）。全局样式不会受组件封装限制，能作用到整个应用的所有元素，包括动态创建的Alert。

示例代码：

// src/app/app.scss
.alert-md {
  max-width: 300px !important;
}

2. 关闭当前页面的样式封装 #

在页面组件的@Component装饰器里设置encapsulation: ViewEncapsulation.None，这样页面SCSS里的样式就会变成全局样式，能作用到Alert。不过要注意，这种方式可能会污染其他组件的样式，建议配合自定义类使用，缩小作用范围。

示例代码：

// 页面的.ts文件
import { Component, ViewEncapsulation } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Component({
  selector: 'page-your-page',
  templateUrl: 'your-page.html',
  styleUrls: ['your-page.scss'],
  encapsulation: ViewEncapsulation.None // 关闭样式封装
})
export class YourPage {
  constructor(public alertCtrl: AlertController) {}
}

// 页面的.scss文件
.alert-md {
  max-width: 300px !important;
}

3. 给Alert添加自定义CSS类（推荐） #

这种方式最安全，不会污染全局样式。创建Alert时指定自定义类，然后在全局SCSS里针对这个自定义类写样式：

示例代码：

// 页面的.ts文件
presentAlert() {
  let alert = this.alertCtrl.create({
    title: '提示',
    message: '这是自定义宽度的Alert',
    cssClass: 'custom-small-alert', // 添加自定义类
    buttons: ['确定']
  });
  alert.present();
}

// src/app/app.scss
.custom-small-alert.alert-md {
  max-width: 300px !important;
}

小提醒 #

尽量避免直接修改Ionic的默认类（比如.alert-md），用自定义类的方式更灵活，也能避免后续Ionic版本更新时默认样式变化带来的冲突。

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