CODEWITHSUNDEEP
htmlcssangularangular-material
Edy
Edy

Reputation: 159

Set style to mat-dialog-container

Im trying to edit the mat-dialog-container but Im not able to, I tried with :host::ng-deep and also I look for answers of this and I found that I should be ablo to give it style by adding a class, but the style is not changin, here is the code about what I found

for the style.css file

.custom-dialog-container .mat-dialog-container {
overflow-y: hidden !important;
display: flex !important;
background-color: red;
}

For the ts componen

  abrirForm(id:number){
const data = id??null
this.ventana.open(ModalInspeccionComponent,{data:data, disableClose:true,maxWidth: '100vw', panelClass: 'custom-dialog-container'}).afterClosed().subscribe(e =>{
  if (e) {
    console.log(e);        
  }
})

}

Upvotes: 0

Views: 1569

Answers (1)

Tanner
Tanner

Reputation: 2411

The dialog opens outside of the component, so styles in the component file will not be applied to it. Place your styles for .custom-dialog-container in your root css/scss file, and they should apply to the dialog then.

Here is a minimal example: https://stackblitz.com/edit/angular-ivy-ggzfwu?file=src/styles.css

Upvotes: 1

Related Questions