Angular独立组件Dialog样式不生效问题求助

核心问题1：未使用Angular Material按钮指令 #

你的模板里的按钮是普通HTML按钮，没有添加Angular Material的mat-button指令，导致color属性和Material按钮样式无法生效。

修改模板中的按钮代码，给每个按钮加上mat-button：

<h4 mat-dialog-title>Confirm</h4>
<div mat-dialog-content>
    {{message}}
</div>
<div mat-dialog-actions>
    <button mat-button (click)="yes()" color="primary">Yes</button>
    <button mat-button (click)="no()" color="warn">No</button> <!-- 注意：Material按钮的color属性仅支持primary/accent/warn三个值，你写的alert是无效的 -->
    <button mat-button (click)="cancel()" color="warn" *ngIf="showCancel">Cancel</button>
</div>

核心问题2：可能未导入Material主题样式 #

如果上述修改后样式仍有问题，检查全局样式文件（通常是src/styles.scss）是否导入了Angular Material的预构建主题：

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

没有导入主题的话，所有Material组件的基础样式都无法正常渲染。

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