angularjs 更改Angular 材质对话框样式

yi0zb3m4 于 7个月前发布在 Angular

关注(0)|答案(1)|浏览(69)

我试图创建一个有Angular 的材料对话框模态，但我想覆盖与Bootstrap模态风格的Angular 材料的风格.我试图使用'panelClass'，但风格不适用.
有人已经遇到过这个问题吗？
这是我父母的代码

const dialogRef = this.dialog.open(ConfirmModalComponent, {
      data: { title: 'Eliminazione modulo', paragraph: 'Sei sicuro di voler eliminare il modulo' + name, buttonText: 'Conferma' },
      panelClass: ['modal-dialog', 'modal-dialog-centered']
    });

字符串
我的模态代码

<div class="modal-content">
  <div class="modal-header">
    <h1 mat-dialog-title class="modal-title">{{ this.data.title }}</h1>
  </div>
  <div mat-dialog-content class="modal-body">
    <p>{{ this.data.paragraph }}</p>
  </div>
  <div mat-dialog-actions class="modal-footer">
    <button
      class="btn btn-primary mx-conf-button me-2"
      [mat-dialog-close]="result"
    >
      <span>{{ this.data.buttonText }}</span>
    </button>
    <button class="btn btn-outline-danger" (click)="this.onClose()">
      Chiudi
    </button>
  </div>
</div>

型

angularjs

来源：https://stackoverflow.com/questions/77244180/change-angular-material-dialog-style

1条答案

按热度按时间

jvlzgdj91#

@media screen and (min-width: 501px) {
  ::ng-deep .custom-modalbox {
    .mdc-dialog {
      padding: 20px !important;
      width: 900px;
    }
  }
}

@media screen and (max-width: 500px) {
  ::ng-deep .custom-modalbox {
    .mdc-dialog {
      padding: 20px !important;
      width: 90%;
      margin: 0 auto;
    }
  }
}

::ng-deep .custom-modalbox-min .custom-modalbox {
  mat-dialog-container {
    padding: 0;
  }

  .modal-header {
    width: 100%;
    justify-content: start !important;
    padding: 8px 20px !important;
  }

  .mdc-dialog__title {
    padding: 0px !important;
  }

  .mat-mdc-dialog-container .mdc-dialog__title {
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: bold;
    color: var(--phoenix-gray-800) !important;
  }

  .mat-mdc-dialog-container .mdc-dialog__content {
    font-family: "Nunito Sans", sans-serif !important;
  }

  .mdc-dialog__content {
    padding: 10px, 20px !important;
  }

  .mat-mdc-dialog-actions {
    justify-content: end !important;
  }

  .mdc-dialog__actions {
    padding: 8px 20px 20px 20px !important;
  }
}

@media media and (min-width: 501px) {
  ::ng-deep .custom-modalbox-min {
    .mdc-dialog {
      padding: 20px !important;
      width: 600px;
    }
  }
}

@media screen and (max-width: 500px) {
  ::ng-deep .custom-modalbox-min {
    .mdc-dialog {
      //padding: 20px !important;
      width: 90%;
      margin: 0 auto;
    }
  }
}

字符串

赞(0）回复(0）举报 7个月前

我来回答

angularjs 更改Angular 材质对话框样式

1条答案

相关问题

热门标签

最新问答