mdb toast overriding default opacity

Topic: mdb toast overriding default opacity

getitdonefitness asked 3 years ago

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.


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


 const options = { positionClass: 'md-toast-top-left',toastClass: 'opacity' };

Arkadiusz Idzikowski staff answered 3 years ago

Please make sure that you added the scss rules to the global styles.scss file and try to add third argument (empty string for example) to the error method:

this.toastSvc.error('blah', '', options);

getitdonefitness commented 3 years ago

I added the properties below to the global styles.css and it worked. thx

.opacity { opacity: 1 !important;}

toast-container > mdb-toast-component.opacity,

toast-container > mdb-toast-component.opacity > div {

opacity: 1 !important;}

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.4
  • Device: mac
  • Browser: chrome
  • OS: mac
  • Provided sample code: No
  • Provided link: No