Добавление background-image в mat-диалог

Question

Я пытаюсь добавить background-image в mat-dialog, потратив некоторое время на документацию mat-dialog, я понял, что могу использовать panelClass: 'my-class', чтобы настроить внешний вид mat-dialog, здесь my-class в итоге получаю применение div, имеющий класс cdk-overlay-pane в mat-диалоге, что-то вроде этого.

Затем я добавил этот CSS, чтобы поместить фоновое изображение в матовый диалог.

.my-class .mat-dialog-container {
  background: url("assets/illustrations/abc.svg") no-repeat;
  padding-bottom: 16px !important;
}

.my-class {
  // background: white !important;
  border-radius: 10px;
}

в конце концов, mat-диалог в итоге выглядел таким образом, с прозрачным фоном.

Чтобы решить эту проблему, я добавил background: white; к my-class, и тогда это выглядело так:

Кажется, все работает нормально, но теперь оно немного глючит, как только я закрываю диалоговое окно, белый фон того же размера теряется на миллисекунды, а затем исчезает.

Answer 1

Мне удалось решить проблему, изменив то, что я делал, иногда проще изменить подход, чем пытаться найти решение ситуации, по которой вы столкнулись.

Я сделал этоследующим образом.

В прикрепленном изображении div, имеющий class = 'content представляет содержимое диалогового окна, так что это в основном div, который мы помещаем в качестве оболочки для содержимогомы хотим отобразить в mat-диалоге, в моем названии я назвал его content.

Поэтому я изменил .mat-dialog-контейнер дополняется до 0, так что содержимое div может занять полный height and width, а затем добавляется background-image к содержимому div.

.my-class .mat-dialog-container {
  padding: 0px !important;
}

Окончательный результат можно увидеть на изображении ниже.