Styling ionic 2 toast

If you define your own css class in app.scss (not in page.scss) you can style it with .toast-wrapper and .toast.message No need to use > div{

Example:

.yourtoastclass {
  .toast-wrapper {
    background: blue;
    opacity: 0.8;
    border-radius: 5px;
    text-align: center;
  }
  .toast-message {
    font-size: 3.0rem;
    color: white;
  }
}

in theme/variables.scss you can make a default

Example (red and little transparent):

$toast-width:   75%;  /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);

I was able to achieve a toaster color change by adding a custom class on the toaster create

let toast = this.toastCtrl.create({
    message: 'Foobar was successfully added.',
    duration: 5000,
    cssClass: "toast-success"
  });
  toast.present();
}

In that pages scss file i then went outside the default nested page name ( because the toaster is NOT inside the root of ion page name thing). And all though this is a bit hacky i just explicitly targeted the next div element after the custom class that i added

.toast-success {
  > div{
       background-color:#32db64!important;
   }
}

I say its hacky because you have to use the !important on it. You can avoid the !important by wrapping the .toast-success with .md,.ios,.wp{...

You can override the style default by overriding the main toaster variables in the theme/variables.scss file.

$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);

This will only override the default value though and not a custom value. there are a few more variables that can be styled as well.

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

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.