How to Add Multiple Panel Classes to a Mat Dialog in Angular?

To add multiple panel classes to a mat dialog in Angular, you can pass an array of panel classes as a second parameter to the method.

Something like this:

  // Open dialog box
  const dialogRef =,{
    height: '50%',
    panelClass: ['class1', 'class2']  // <-- Add multiple panel classes

Now to make these panel classes effective, you have to add them inside your global styles.css file. And you can add as many styles under each panel class as you want.

.class1 .mat-dialog-container{
    background-color: aqua;
    padding: 20px 10px;

    /* Add More Styles */

.class2 .mat-dialog-container{
    font-style: italic;
    color: rgba(0, 0, 0, 0.8);

    /* Add More Styles */