Ionic4 - updating toast scss not reflecting change

Ionic Framework ionic-v3
1

I am attempting to update my toast scss to produce a toast that is red, centered black text , and height of 10px.

I have the following scss:

.toastCss {
        --height: 10px;	
        --color: #0000;
    }

and the following in my .ts file:

    this.dragulaService.removeModel('bag')
    .subscribe(({ item }) => {
      this.toastController.create({ 
            position: 'middle',
            message: 'Ops....',
            cssClass: 'toastCss',
            color: 'danger',
            duration: 2000
      }).then(toast => toast.present());
    });

The position and color of the toast displays correctly but cssClass is not being read.
Any thoughts on why this may be .
Thanks in advance!

1 Like
2

Hello ,
i think the application give always priority Typescript .
this is what always happens in any application ionic when you put some values to proprieties in your ts file
and different values in css file the application choose always by default typescript values

1 Like
3

He is right. Hence u can create update toast css through using custom typescript css.

Here is how you can create custom animation/css in typescript and import the methods into ur toast controller enterAnimation attribute and leaveAnimation attribute.

1 Like
4

Use the css in global.scss

1 Like
6

i also found that this could be updated using variable.scss

7

Yes. U can do that if the css4 variable is define for the properties that u want to change. Cheers.