Angular 18 MatDialog panelClass styles not applying after upgrade from Angular 14

I am upgrading my Angular project from version 14 to 18 and encountered an issue with the styles of my dialog boxes using Angular Material's MatDialog. The styles defined for the dialog in my styles.scss file are not applying when I use the panelClass property.

Here is the style I have defined in styles.scss:

.standard-dialog {
.mat-dialog-container {
padding: 1em 1em 1em 1em;
border-radius: 25px;
width: 100%;
height: 100%;
max-height: 800px;
overflow: hidden;
}
}


In my component, I configure the dialog like this:

changeLanguage() {
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = false;
dialogConfig.maxHeight = '800px';
dialogConfig.panelClass = "standard-dialog";
this.dialog.open(LoginRegisterDialogComponent, dialogConfig);
}


And here is the dialog component itself:

import { Component, OnInit, OnDestroy, inject } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
import { BreakpointObserver } from '@angular/cdk/layout';

@Component({
selector: 'app-login-register-dialog',
templateUrl: './login-register-dialog.component.html',
styleUrls: ['./login-register-dialog.component.scss']
})
export class LoginRegisterDialogComponent implements OnInit, OnDestroy {
readonly dialogRef = inject(MatDialogRef<LoginRegisterDialogComponent>);
readonly dialog = inject(MatDialog);
readonly breakpointObserver = inject(BreakpointObserver);

constructor() {}
}


The problem is that none of the styles defined in the standard-dialog class are applied to the dialog. This worked perfectly in Angular 14, but after upgrading to Angular 18, it no longer works. What I've Tried:

Verified that the panelClass is correctly assigned to the dialog configuration. Ensured the styles are globally defined in styles.scss. Checked for encapsulation issues by adding ViewEncapsulation.None to the dialog component. Inspected the DOM to confirm the standard-dialog class is added to the mat-dialog-container element. Tried using !important on the styles to override any conflicting styles.

Questions:

Has something changed in how Angular 18 handles panelClass or dialog styles? How can I ensure that the styles in styles.scss are applied to my dialog in Angular 18?

Any help would be appreciated! Thank you.

Continue reading...