Custom parent container for Angular material overlay container?

问题

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

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

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.

回答1:

Basically create a class that extends OverlayContainer. Override the getContainerElement method where you return your HTML element which should be appended with the overlay. If needed, You can also override _createContainer method, where you do your own logic to create the element.

Finally provide your CustomOverlayContainer class as Token for OverlayContainer like this:

@NgModule({
    providers: [{provide: OverlayContainer, 
                 useClass: CustomOverlayContainer}],
    // ...
})
export class MyModule { }

Just have a look at the origin file. It's quite easy: OverlayContainer

回答2:

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 }
});

in component css add

.popupBackdropClass {
  background-color:yellow
}

来源：https://stackoverflow.com/questions/53871857/custom-parent-container-for-angular-material-overlay-container

标签

angular

angular-material