Changing style of overlay container
Solution 1
UPDATED ANSWER
From the official documentation:
Styling overlay components
Overlay-based components have a panelClass property (or similar) that can be used to target the overlay pane.
You can override the default dialog container styles by adding a css class in your global styles.css
. For example:
.custom-dialog-container .mat-dialog-container {
/* add your styles */
}
After that, you'll need to providies you css class as a panelClass
parameter to your dialog:
this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })
Read this official documentation for more information.
ORIGINAL ANSWER
Use ::ng-deep
in your component.css to override the default styles.
::ng-deep .cdk-overlay-container {
/* Do you changes here */
position: fixed;
z-index: 1000;
}
Solution 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 css add
.popupBackdropClass {
background-color:yellow
}
Solution 3
To be able to override the Material CSS classes from your component styles, you will need to set the View Encapsulation to None on your component:
@Component({
templateUrl: './my.component.html' ,
styleUrls: ['./my.component.scss'], //or .css, depending what you use
encapsulation: ViewEncapsulation.None,
})
Solution 4
Overriding cdk-overlay-containeris not good since it is gonna affect all other components. You can create custom OverlayContainer
. See example.
Related videos on Youtube
user1025633
Updated on July 09, 2022Comments
-
user1025633 almost 2 years
I use a git project for a virtual keyboard (https://ngx-material-keyboard.github.io/demo/). And I have some issues to get it running on a small device with 450*250 pixel.
At the end I found the necessary changes in the css if I modify it directly at the web browser with dev tools.
Now I have to find the right position to change the sources.
There will be used the overlay component from angular2-material to visualize the keyboard.
If I comment out the position in the cdk-overlay-container, it works:
.cdk-overlay-container { /* position: fixed; */ z-index: 1000;
}
But I cant overwrite these from my angular application. Any suggestions?
-
Mark almost 6 yearsIt's worth noting that ::ng-deep is deprecated - but I can't find clarification on timeframes or alternatives
-
Mar almost 6 years::ng-deep doesn't stay in isolated scope, it will effect other views too
-
Awais over 4 yearsWhat if i need to set z-index of .cdk-overlay-container for mat-menu and mat-dialog separately. as i have fixed header on my site
-
aruno about 2 yearsFor this case
::ng-deep
effectively does the same as to put the css code in the global styles. You're better off putting it in global styles - because it isn't scoped to your component. In fact it's worse than that - lets say you put background: blue - and opened a dialog from another component. It wouldn't be blue right. But then you open this component and it's blue - great! Then go back and open the first one again and it will still be blue. This belongs in global styles.css or scss.