Angular 14中如何为mat-dialog-title设置主题颜色？

嗨，我来帮你搞定这个问题～你遇到的情况其实很常见，咱们先搞清楚为啥原来的写法没用：

你用 <h2 mat-dialog-title color="primary">Title</h2> 没效果，是因为**MatDialogTitle组件本身并没有提供color这个输入属性**，而mat-button-icon属于Material的按钮组件家族，它原生就支持color属性来绑定主题里的primary/accent/warn色值，所以能正常生效。

那怎么给mat-dialog-title设置主题颜色呢？给你几个简单可行的方法：

• 直接用Material主题类名
  这是最快捷的方式，Angular Material提供了mat-primary、mat-accent、mat-warn这些全局类，直接加到标题元素上就行：

  <h2 mat-dialog-title class="mat-primary">Title</h2>
  

  这样标题就会自动应用你主题里的primary颜色，换类名就能切换其他主题色，非常方便。

• 用组件内样式结合主题变量
  如果需要更精细的样式控制，你可以在组件的SCSS里用Angular Material的主题颜色变量，比如：

  ::ng-deep .mat-dialog-title {
    color: var(--mat-primary-text-color);
    /* 也可以用具体的颜色变量，比如--mat-primary-500 */
  }
  

  用::ng-deep是为了穿透组件的样式隔离，确保样式能作用到MatDialogTitle的内部元素上。

• 全局样式定义
  要是你希望所有的对话框标题都统一用这个颜色，也可以在全局的styles.scss里直接写：

  .mat-dialog-title {
    color: mat.get-color-from-palette($primary, 500);
  }
  

  这种方式适合全局统一配置的场景。

选第一种方法就足够应付大部分情况啦，简单又省心～

备注：内容来源于stack exchange，提问作者SullenMan