To apply custom CSS to a mat dialog in Angular, you can take the help of a panel class. This can be very easily done in the below two steps.
Step 1: Open your ts file wherever you are calling the mat dialog and add a custom panel class inside the matDialogConfig object. The name of the panel class can be anything.
const dialogRef = this.dialog.open(MyDialogComponent,{
width:'600px',
height:'350px',
panelClass: 'my-class' // Add a custom panel class
});
Step 2: Now put this panel class inside your global styles.css file and write whatever CSS styles you want to apply on the above mat dialog.
.my-class .mat-dialog-container{
background-color: white ;
color: rgba(0,0,0,0.8);
padding: 20px;
/* Add more css styles */
}
