Ionic modal doesn't take class in global.scss

Question

I have modal in Ionic, it works perfect, but I can't style it, it always shows full screen on mobile. I will appreciate if you can guide me to customize it. Thanks!

 ts:
        const modal = await this.modalCtrl.create({
              component: ModalInfoPage,
              cssClass: 'my-modal-info',
        .................

---

global.scss:
.my-modal-info .modal-wrapper {
    background-color: rgb(65, 153, 22);
    height: 60%;
    top: 20%;
    position: absolute; 
    display: block; 
}

---

Ionic CLI                     : 6.10.0 (C:\Users\UUU\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.0.2
   @angular/cli                  : 13.0.4

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0

Answer 1

global.scss

ion-modal#ride-time {
  --background: rgba(0, 0, 0, 0.2);

  &::part(content) {
    backdrop-filter: blur(6px);
    width: 100%;
    height: 100%;
  }

  app-time-picker {
    background: transparent;
    padding-top: 50%;
    padding-block-start: 50%;
    padding-left: 10%;
    padding-right: 10%;
  }
}

ts:

  async openTime(componentProps) {
    const options: ModalOptions = {
      id: 'ride-time',
      keyboardClose: true,
      component: TimePickerPage,
      componentProps: componentProps,
    };
    const modal = await this.modalCtrl.create(options);
    return modal;
  }

the way to target has changed, now you need to use shadow parts to achieve what u want..