Styling ionic 2 toast

Answer 1

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