The only way that I succee to update .mat-dialog-container style is by adding ::ng-deep

::ng-deep  .mat-dialog-container {
  overflow: hidden
}

as I understand it is recommended to avoid using :ng-deep.

How I can update the style without it? Thanks

CodePudding user response：

Material components makes a extensive use of cdk-over-lay. This makes that to change the .css we need use a global style (a cdk-over-lay create a div "outside of" application, press F12 to see, this is the reason no .css can "reach it"). So we need override the .css in styles.css (a ViewEncapsulation.None make the same effect)

If we want to override all the components of same type, we can e.g.

 //in styles.css
.mat-dialog-container{
  background-color:red;
}

But what happen if we only want to change the mat-dialog of a specific component? Well, all the material component (check the docs) usually has a property called panelClass -in the case of dialog we indicate this property in the "config"-

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      panelClass: 'custom',
     ...
});  

Now we can use specificity and create a class like

//also in styles.css
.custom .mat-dialog-container{
  background-color:red;
}

CodePudding user response：

There's an option:

1. add ViewEncapsulation.None to your component config object:

   @Component({
       selector: 'tase-market-movements',
       templateUrl: 'market-movements.component.html',
       styleUrls: ['market-movements.component.scss'],
       encapsulation: ViewEncapsulation.None
    })
   export class MarketMovementsComponent {}
   

and then all style rules that you write apply to all your application, which is not good.

2. wrap all your CSS inside the class, ( name it as the name of your component )

    .marketMoveementsComponent {
   // write all your css code
   } 
   

3. add this class name to the wrapper tag in the template

   <div >
        <!--  all your html code-->
   </div>
   

this way your CSS code is still encapsulated from the outside, but the CSS connected to the component is encapsulated.

good luck :)