ionic3弹框自定义样式

小编最近需要做个基于ionic3的弹框功能，样式如下：

1、该弹框通过ts文件来实现代码如下：

          message:"<img src='assets/imgs/ceshi.png'/>",
          buttons: [
            {
              text: '点此购买',
              handler: () => {
                if(money<5){
                  super.showToast(this.toastCtrl, "抱歉，积分不足！")
                  return;
                }else{
                  this.buyTicket();
                }
              }
            }
          ]
        });
        confirm.present();

运行结果如下：

2、修改样式

这个运行结果不符合项目需求，所以需要调样式：
首先在ts文件中添加一行代码，对于这个弹框绑定样式：

scss代码如下（该代码只有在全局变量时才可起作用，例如app.css，或组件的scss样式外部）：

  .alert-message {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      background-color: red !important;
      padding: 0px !important;
      border-radius: 5px !important; /*这句就是重点，让边框变为圆角*/
    }
    .alert-head{
      padding: 0px !important;
    }
    .alert-button-group{
      margin-top: -1px !important;
      border-radius: 5px !important; /*这句就是重点，让边框变为圆角*/
      padding-left: 0px !important;
      margin-right: 25% !important;
    }
    .button-inner{
      font-size: 23px !important;
      text-align: center !important;
      color: blue;
      font-weight:bold;
    }
    .alert-wrapper{
      border-radius: 5px !important; /*这句就是重点，让边框变为圆角*/
      border: 1px solid #CCC !important; /*让边框变为1px宽度，直线，#CCC颜色*/
      background-color:  rgb(189, 77, 12) !important;
    }
    .disable-hover alert-button alert-button-ios alert-button-default alert-button-default-ios{
      padding-left: 25%;
    }

3、运行结果如下：