Angular Material SnackBar渲染无样式问题求助

我正在实现Angular Material SnackBar组件，组件可以正常渲染，但缺少正确的样式。

相关代码 #

notification-snack-bar.component.html #

<div class="notification-snack-bar-container flex">
  <div>
    <span class="mat-warn-color"
      >An Error Occurred: {{ message }}<br /><span *ngIf="timerCount > 0"
        >Timer: {{ timerCount }}</span
      ></span
    ><br /><span>See the console for the full error.</span>
  </div>
  <button mat-button color="accent" (click)="dismiss()">{{ action }}</button>
</div>

notification-snack-bar.component.ts #

import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
import { NotificationService } from './notification.service';

@Component({
  selector: 'app-notification-snack-bar',
  templateUrl: 'notification-snack-bar.component.html',
  styles: [
    `
      .flex {
        justify-content: space-between;
        align-items: center;
      }
      .notification-snack-bar-container > div {
        overflow: hidden;
      }
      span {
        width: 100%;
        display: inline-block;
      }
      span > span {
        padding: 0;
      }
      button {
        padding: 0;
      }
    `,
  ],
})
export class NotificationSnackBarComponent {
  public action = 'dismiss';
  public interval: any = null;
  public message = 'Unknown error...';
  public timerCount = 0;

  constructor(
    @Inject(MAT_SNACK_BAR_DATA) public data: any,
    public snackBar: MatSnackBar,
    private notificationService: NotificationService,
  ) {
    console.log(data)
    this.message =
      typeof data.message === 'string'
        ? data.message
        : typeof data.message === 'object' && data.message.message
          ? data.message.message
          : 'Unknown Error...';
    this.action = data.action ? data.action : 'dismiss';
  }

  startTimer(timerDuration: number) {
    this.timerCount = timerDuration;
    this.interval = setInterval(() => {
      if (this.timerCount > 0) {
        this.timerCount--;
      } else {
        this.timerCount = 60;
      }
    }, 1000);
  }

  dismiss(): void {
    this.notificationService.errorBeingDisplayed = false;
    this.snackBar._openedSnackBarRef!.dismiss();
  }
}

header.component.ts（调用SnackBar的位置） #

import { Component, OnInit, NgZone } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { NotificationService } from '../notification/notification.service';
import { NotificationSnackBarComponent } from '../notification/notification-snack-bar.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
  constructor(
    private snackBar: MatSnackBar,
    private notificationService: NotificationService,
    private zone: NgZone,
  ) { }

  ngOnInit() {
    this.notificationService.displayError$.subscribe((error) => {
      this.zone.run(() => {
        this.snackBar.openFromComponent(NotificationSnackBarComponent, {
          data: {
            message: error,
          },
        });
      });
    });
  }
}

angular.json配置截图 #

当前渲染效果 #

解决方案 #

1. 补全Flex布局基础样式 #

组件内的.flex类缺少display: flex属性，添加后才能实现预期的横向排列：

// 在notification-snack-bar.component.ts的styles数组中修改
.flex {
  display: flex; /* 新增该行 */
  justify-content: space-between;
  align-items: center;
}

2. 确保全局导入Angular Material主题样式 #

在项目全局样式文件（如styles.scss）中确认已导入Material预构建主题：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

若使用自定义主题，需确保主题配置文件已正确导入到全局样式中。

3. 通过panelClass自定义SnackBar容器样式 #

调用SnackBar时指定自定义面板类，避免组件样式隔离导致的失效：

// 在header.component.ts中修改openFromComponent配置
this.snackBar.openFromComponent(NotificationSnackBarComponent, {
  data: { message: error },
  panelClass: 'custom-error-snackbar' /* 添加自定义类 */
});

然后在全局样式文件中编写该类的样式：

.custom-error-snackbar {
  padding: 16px;
  background-color: #f44336;
  color: #fff;
  
  .mat-button {
    color: #fff;
    margin-left: 16px;
  }
}

4. 检查angular.json样式配置 #

确认styles数组中包含Material样式文件及项目全局样式文件，参考配置截图确保无遗漏。

内容的提问来源于stack exchange，提问作者blubberbo