How to Apply CSS to a Mat Dialog in Angular?

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 =,{
  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 */


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.