Changing Angular Material mat-dialog-content styles

Question

In angular dialogs you can add <mat-dialog-content>, but is there any way to style this?

I tried:

.mat-dialog-content {
    padding: 10px;
}

But that doesn't seem to work. Though, these two work fine:

.mat-dialog-container {
    padding: 0px !important;
}

.mat-dialog-title {
    color: white;
    background-color: #F48043;
    text-align: center;
    width: 100%;
    font-size: 20px;
    padding: 20px 0px !important;
}

Any idea how to access that <mat-dialog-content>'s styles?

Solution 1

There is official guideline how to do it: https://material.angular.io/guide/customizing-component-styles E.g.

For example, to remove the padding from a dialog:

// Add this to your global stylesheet after your theme setup
.myapp-no-padding-dialog .mat-dialog-container {   
  padding: 0;
}

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

Since you are adding the styles to your global stylesheet, it is good practice to scope them appropriately. Try prefixing your selector with your app name or "custom". Also note that the mat-dialog-container's padding is added by default via a selector with specificity of 1. The customizing styles have a specificity of 2, so they will always take precedence.

Solution 2

Using the CSS in style.css or any global CSS file.

You have to declare it as important, otherwise, the material style will override it.

.mat-dialog-content {
    padding: 10px !important;
}

Comments

[Prachi]

Are you trying this in inline style file? Try using it in style.css or any global css file.

[Frank]

I was using it in global style.css hey

[saberprashant]

Hi @Ruklav-Nomad, any idea regarding the style leaks(adding same styles to other mat-dialogs) due to this? :host >>> or :host ::ng-deep not working though