Stacked Modal in ionic 6 without Backdrop

Issue

I try to add a backdrop to my stacked modal (ionic 6) with a smaller size then the first opened, like here:
https://ionicframework.com/docs/api/modal

and put this:

ion-modal.stack-modal { 
 --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); 
 --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}

in my global.scss.

Now I’m opening my Modal with:

const modal = await this.modalCtrl.create({
      component: StackedModalPage,
      cssClass: 'stack-modal',
      componentProps: {

But it’s not working for me, the smaller Modal opens without any backdrop.

Solution

As found here https://forum.ionicframework.com/t/backdrop-for-stack-modal/222468

Try using !important

ion-modal.stack-modal { 
 --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4) !important; 
 --backdrop-opacity: var(--ion-backdrop-opacity, 0.32) !important;
}

Are you by any chance the "basti" user on the referenced forum?

Answered By – Dolan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0