为Angular材质叠加层容器自定义父容器? [英] Custom parent container for Angular material overlay container?

问题描述

角度材料可为各种组件(如菜单，小吃栏和对话框组件)创建覆盖容器.

Angular material creates overlay containers for various components such as their menu, snackbar and dialog components.

我如何以一种简单的方式来确定应将cdk-overlay-container附加到哪个元素?

How can I, in an easy way, decide which element a cdk-overlay-container should be appended to?

当前，它被附加到body元素上.因此，如果我为body元素以外的任何其他元素触发全屏模式，则将看不到它.当然那不是我想要的.

Currently, it's appended to the body element. So if I trigger full screen mode for any other element than the body element, it won't be seen. Which of course is not what I want.

推荐答案

如果要更改mat-dialogue-container的样式，则添加面板类并给出样式就足够了，但是如果您要更改样式cdk-overlay-container，然后添加一个backgroundClass将有所帮助

If you want to change the styling of mat-dialogue-container adding a panel class and giving style is enough, but in case if you want to change the styling of cdk-overlay-container then adding a backdropClass will help

const dialogRef = this.dialog.open(PopupComponent, {
  backdropClass: 'popupBackdropClass',
  panelClass: 'custom-dialog-container',
  data: { data: data }
});

在组件css add中

in component css add

.popupBackdropClass {
  background-color:yellow
}

这篇关于为Angular材质叠加层容器自定义父容器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！