I followed the instructions in the documentation, which talks about overriding the default toast opacity. But, the toast opacity did not change and the message is too hard to read. When I hover over it, the opacity increases. How do I change the initial opacity?

I tried the following code but it didn't work.

css:

  .opacity {
  opacity: 1 !important;
}
#toast-container > mdb-toast-component.opacity,
#toast-container > mdb-toast-component.opacity > div {
  opacity: 1 !important;
}

ts

 const options = { positionClass: 'md-toast-top-left',toastClass: 'opacity' };
      this.toastSvc.error('blah',options);