angular cdk overlay changing styles css

1/* First make sure you have the cdk styles if not using material already */
2@import '~@angular/cdk/overlay-prebuilt.css';
3
4/**
5* Using cdk input class property
6* (intended way)
7*/
8
9.custom-dialog-container .mat-dialog-container {
10    /* add your styles */
11}
12
13/* then use it like this:
14this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })
15*/
16
17/**
18* Bypassing encapsulation
19* (secondary more powerfull way)
20*/
21
22/* Then you can target the overlay container styling through the use of ::ng-deep */
23::ng-deep .cdk-overlay-container {
24    /* Do you changes here */
25}
26
27/* You can also simply use global styles (styles.css) */
28.my-class .some-cdk-class { }
29
30/* Or set view encapsulation to none to be able to do the same 
31@Component({
32    templateUrl: './my.component.html' ,
33    styleUrls: ['./my.component.scss'], //or .css, depending what you use
34    encapsulation: ViewEncapsulation.None,
35})
36*/