Переопределение Angular Размер материала и стиль md-dialog-container

Я использую Angular Материал, и я использую md-dialog для своих всплывающих окон для моей галереи. По умолчанию анимация и стиль выглядят неплохо. Однако я хотел бы изменить ширину и высоту размера md-dialog-container? который скрыт. Добавляется только при нажатии модальности, и когда вы открываете инструменты chrome dev, вы можете увидеть появление md-dialog-container. Включите, как переопределить остальную часть стиля.

Очень ценю с некоторой помощью. Благодарю.

Ответ 1

Из официальной документации:

Styling overlay components

Компоненты на основе оверлеев имеют panelClass свойство (или подобное), которое можно использовать для нацеливания на область наложения.

Вы можете переопределить стили контейнера диалога по умолчанию, добавив класс css в свой глобальный styles.css. Например:

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

После этого вам нужно будет указать класс css в качестве параметра panelClass в своем диалоговом окне:

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

Прочтите эту официальную документацию для получения дополнительной информации.

Ответ 2

Вы можете изменить ширину/высоту модальности, установив значения в методе open(), что-то вроде следующего:

this.dialog.open(MyDialogComponent, {
  height: '300px'
  width: '400px'
});

Ответ 3

    const dialogRef = this.dialog.open(WorkModalComponent, {
       width: '1200px',
       data: workObj,
       panelClass: 'my-dialog-container-class' // Replace with your actual dialog container class
    });

добавьте panelClass в свой диалог и добавьте стиль CSS в этот класс.