Angular Material 15中mat-dialog样式意外变更问题咨询

这不是Bug，属于设计变更——Angular Material 15完成了底层到MDC（Material Design Components）的全面迁移，对话框内容的样式逻辑改为继承MDC的默认配置，因此会出现与应用其他区域文本样式不一致的情况。

问题中的CSS说明 #

你贴出的两段CSS是MDC对话框内容的默认样式：

• 第一段定义文本颜色，使用MDC变量--mdc-dialog-supporting-text-color，默认值为black
• 第二段定义字体相关属性，包括字体族、行高、字号、字重、字间距，均采用MDC变量+默认值的形式

解决方式 #

1. 统一MDC变量（推荐）

在全局样式文件（如styles.scss）中覆盖MDC对话框相关变量，让其匹配应用的全局样式：

:root {
  --mdc-dialog-supporting-text-color: #333; /* 替换为你应用的文本颜色 */
  --mdc-dialog-supporting-text-font: "Roboto", sans-serif; /* 替换为你应用的全局字体 */
  --mdc-dialog-supporting-text-line-height: 1.5;
  --mdc-dialog-supporting-text-size: 16px;
  --mdc-dialog-supporting-text-weight: 400;
  --mdc-dialog-supporting-text-tracking: 0;
}

2. 直接覆盖对话框样式

如果不需要全局修改MDC变量，可以针对性覆盖对话框内容的样式，注意提升优先级：

.mat-mdc-dialog-container .mdc-dialog__content {
  color: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

配置检查 #

若样式差异特别明显，可检查应用的MDC主题配置是否完整：确保已按Angular Material 15的要求导入主题文件，或自定义主题时包含了对话框相关的样式混入。

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