Styling ionic 2 toast

Answer 1

First, import toast controller from ionic-angular and make object of that in constructor.

import { ToastController } from "ionic-angular";

constructor(private _tc: ToastController) {
}

After that wherever you want to show your toast message write that.

let options = {
  message: "Your toast message show here",
  duration: 3000,
  cssClass: "toast.scss"
 };

this._tc.create(options).present();

Here is my scss:

.toast-message {
  text-align: center;
}

Or you can check best example from this link. I think it will help you. :)

Or else check the answer on this link.

Answer 2

Ionic 2 provide a very useful way to override their component style you can override the toaster SASS variable in src/theme/variables.scss by adding

$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;

this will override the default style please refer to this Overriding Ionic Sass variable

Answer 3

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;
  }