更改离子2中警报控制器的样式和文本修改

时间:2018-05-31 04:54:55

标签: css angular ionic-framework sass ionic2

enter image description here

实际上我的警报控制器“标题”太长了,所以我想调整文本的大小,然后我添加了Css类,然后尝试通过给它字体大小来改变SASS中的样式,遗憾的是没有用,按钮文本是大写。那么无论如何都要改变文本的字体大小,按钮颜色和大小以及将按钮文本更改为小写?

我的打字稿文件

import { IonicPage,AlertController} from 'ionic-angular';
import { Component,ViewChild } from '@angular/core';
import 'rxjs/add/operator/toPromise';

@IonicPage()
@Component({
  selector: 'page-kpi',
  templateUrl: 'kpi.html',
})
export class KpiPage {

  @ViewChild(Nav) nav: Nav;
  temp2:any;
  lastUpdate:any;

 constructor(
    private alertCtrl: AlertController,
    public menuCtrl : MenuController,


   ) {
      this.platform.ready().then(() => {

              this.refreshbutton();

      }
    });


refreshbutton(){

    this.getSession();

  if(this.offline == true)
    {
       this.offlineRefreshAlert();
    }  
   else{
    let alert = this.alertCtrl.create({
            title: 'Do you really want to refresh the widgets?',
            message: 'Refresh process will take time to complete.',
            cssClass: 'alertLogCss',
            buttons: [
              {
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                  alert = null;
                }
              },
              {
                text: 'Refresh now',
                 handler: () => {
                   if(this.online == true){
                      this.refreshdata(this.result.sid);
                      this.loadingrefreshdashboard();
                   }
                   if(this.offline == true){

                      this.offlineRefreshAlert();
                   }



                 }
               }
            ]
          });
          alert.present();
        }
    }

}

我的SASS(CSS)文件

.alertLogCss{
  background-color: white;
  color: red;
  font-size: 4px;
  button{
      color: red;
      font-size: 5px;
  }
}

1 个答案:

答案 0 :(得分:1)

您必须从该页面的scss块中添加css

.alertLogCss{
    background-color: white;
    color: red;
    font-size: 4px;
    button{
        color: red !important;
        font-size: 10px;
        text-transform: lowercase !important;
    }
  }

放入app.scss