离子模态在 global.scss 中不使用 class

Question

我在 Ionic 中有模态，它工作得很好，但我不能设置它的样式，它总是在移动设备上显示全屏。如果你能指导我定制它，我将不胜感激。谢谢！

 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;
  }

瞄准方式变了，现在你需要使用阴影部分来实现你想要的..

离子模态在 global.scss 中不使用 class

Ionic modal doesn't take class in global.scss

ionic-framework

ionic4