Ionic-v4 how to make transparent modal

Ionic Framework
1

I have modal component, created with

async openCalendar() {
        const modal = await this.modalController.create(<any>{
            component: CalendarComponent
        });
        return await modal.present();
    }

I saw, that ion-modal have –background property, but it doesn`t affect my calendar modal. My calendar modal have app-calendar selector, I tried
app-calendar{
–background:red;
}
ion-content {
–background: red;
}

It doesn`t work.

2

Hi, do you find an answer ?

3

You can create custom css class for your modal and pass it with parameter cssClass, like this:

      const photoRequestModal = await this.modalCtrl.create({
        component: ModalPhotoRequest,
        cssClass: 'my-custom-modal-css',
        componentProps: {}
      });
      return photoRequestModal.present();

And somewhere in your scss define my-custom-modal-css:

.my-custom-modal-css {
    --background: transparent !important;
}

This will make your modal background transparent. Hope it helps!