angular18 - Angular 18 MatDialog panelClass styles not applying after upgrade from Angular 14 - Stack Overflow

I am upgrading my Angular project from version 14 to 18 and encountered an issue with the styles of my

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:

openDialog() {
 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-dialogponent.html',
styleUrls: ['./login-register-dialogponent.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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742398107a4436356.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信