Styling ionic 2 toast

Question

Is there any way to style the text message within an ionic 2 toast?

I have tried this:

    let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true
    });

    toast.onDismiss(() => {
      console.log('Dismissed toast');
    });

    this.nav.present(toast);
  }

But clearly you can't use html in the text so I am guessing the answer to my question is no?

Answer 1

You must add 'cssClass: "yourCssClassName"' in your toastCtrl function.

 let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true,
      cssClass: "yourCssClassName",
    });

than you can add any feature to the your css class. But your css feature went outside the default page'css. Exmp:

   page-your.page.scss.name {
     //bla bla
    }
 .yourCssClassName {
   text-align:center;
  }