How to add css in Vue-Toasted?

Question

I am trying to add the following css, but it isn't working. I think I am going according to the documentation.

https://www.npmjs.com/package/vue-toasted

None of the following approaches work.

The function being used @click of a div.

showToast(){
   this.$toasted.show('Email Sent!',{
        position: "top-right", 
        duration : 5000,
        class: 'toasting'
      });

OR

showToast(){
   this.$toasted.show('Email Sent!',{
        position: "top-right", 
        duration : 5000,
        className: ['toasting']
      });

Style

.toasting {
  color: yellow;
  background-color: pink;

}

Answer 1

Default CSS should be overridden by your CSS. SO your need to use !important in your CSS. Here is the css :

<style>
.toasting {
  color: yellow !important;
  background-color: pink !important;
}
</style>

Working demo

Answer 2

If someone is facing the same issue, the solution above works but keep in mind it's only without style scoping!