Горизонтально центр MatDialog со 100% шириной и фиксированной maxWidth

Question

Я пытаюсь центрировать MatDialog по горизонтали с фиксированной шириной по горизонтали:

let dialog = this.dialog.open(EditVisitPopupComponent,
  { data: { visit: this.visit }, width: '100%', maxWidth: '500px' });

По какой-то причине добавление параметра width добавляет встроенный justify-content: flex start к родительскому оверлею, пока я хотел бы этогоостаться justify-content: center.

Я знаю способ создания модалов, который заключается в создании Overlay и введении в него компонента.Но я не понимаю, почему я не могу сделать это просто с помощью MatDialog.

Что я пробовал:

let dialog = this.dialog.open(EditVisitPopupComponent,
      { data: { visit: this.visit }, position: this.overlay.position().global().centerVertically().centerHorizontally(), width: '100%', maxWidth: '500px' });

Но типы не совпадают.

Я также пытался использовать backdropClass и одноуровневый селектор CSS, но я не получил желаемого результата.

Чего мне не хватает?Есть ли способ настроить Overlay из MatDialog?

Answer 1

После попытки использовать внутренний класс материала MatDialogContainer для своих собственных целей, мне удалось избавиться от MatDialog, и я смог создать свой собственный диалог с параметром Overlay, в который я положил position: this.overlay.position().global().centerVertically().centerHorizontally().

Но я получил точно такой же результат!

Затем я прочитал GlobalPositionStrategy исходный код, и я понял, что авторы Angular Material не учитывают вариант использования width: 100%; max-width:...px;так как есть уродливый

if (config.width === '100%') {
  parentStyles.justifyContent = 'flex-start';
}

Затем я откатился к решению MatDialog, и я положил width: 'calc(100%)', который, даже если некрасиво, работает как шарм и, наконец, дал мне ожидаемый результат