angular cdk overlay changing styles css
/* First make sure you have the cdk styles if not using material already */
@import '~@angular/cdk/overlay-prebuilt.css';
/**
* Using cdk input class property
* (intended way)
*/
.custom-dialog-container .mat-dialog-container {
/* add your styles */
}
/* then use it like this:
this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })
*/
/**
* Bypassing encapsulation
* (secondary more powerfull way)
*/
/* Then you can target the overlay container styling through the use of ::ng-deep */
::ng-deep .cdk-overlay-container {
/* Do you changes here */
}
/* You can also simply use global styles (styles.css) */
.my-class .some-cdk-class { }
/* Or set view encapsulation to none to be able to do the same
@Component({
templateUrl: './my.component.html' ,
styleUrls: ['./my.component.scss'], //or .css, depending what you use
encapsulation: ViewEncapsulation.None,
})
*/