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

Answer 2

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.

Answer 3

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 4

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

Answer 5

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 6

You can accomplish, however you need to modify the toast component template itself.

Via explorer: \node_modules\ionic-angular\components\toast\toast.js

Change line 194 (template): {{d.message}} to <div [innerHTML]='d.message'></div>

Answer 7

You should be able to change any of the message styling in the css using .toast-message selector:

.toast-message { 
    font-family: Helvetica,
    color: red
}

Or, if you look at the docs (http://ionicframework.com/docs/v2/api/components/toast/Toast/) there is a cssClass property you can use to assign your toast a specific class and then style that.

Answer 8

Change toast background color and opacity:

let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      cssClass: 'changeToast'
    });

and add app.scss:

.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};

It's used with .toast-message

Answer 9

I tried all above, still didn't work, therefore I come across a new solution, you need cssClass outside of page css declaration:

let toast = this.toastCtrl.create({
          message: msg,
          duration: 3000,
          position: 'bottom',
          cssClass: 'toastcolor'
        });

post-list.scss like this

page-post-list {

}
.toastcolor .toast-message {
    background-color:skyblue;
}      

Answer 10

Not sure about old Ionic versions, but in Ionic 5 you can't directly change inner CSS since it's encapsulated in the shadow

<ion-select>
  #shadow-root
    <div class="toast-container" part="container">
       ...
    </div>
</ion-select>

so, to change .toast-container (for example) in your cssClass you should use:

.my-custom-class::part(container) {
    flex-direction: column;
}

.my-custom-class {
    .toast-container {
        flex-direction: column; // will not work
    }
}

Answer 11

I'm using ionic v5 with angular and according to: https://ionicframework.com/docs/api/toast#css-shadow-parts

you can do something like this:

::ng-deep{
    ion-toast::part(container) {
        ...
    }
    ion-toast::part(message) {
        ...
    }
}