Angular Material 2升级至18.2.1 M3主题后组件无颜色及相关问题咨询

组件无颜色问题及代码方案说明 #

你通过ng generate @angular/material:m3-theme生成主题后组件无颜色，核心原因是主题样式未正确注入全局作用域。你添加的代码是合规的解决方案，各部分作用如下：

• @include mat.core()：初始化Material基础样式体系，包含基础变量、样式重置等，是所有组件主题的依赖基础
• @include mat.all-component-themes($light-theme)：为所有Material组件批量应用主题样式，生成组件所需的颜色变量与样式规则
• @include mat.system-level-colors($light-theme)：将主题的系统级颜色（如背景色、文本色）注入:root伪类，确保全局样式可访问这些变量
• @include mat.system-level-typography($light-theme)：注入全局字体排版相关的变量与样式，统一全局字体风格

Angular Material 3的主题机制要求这些混合宏必须在全局作用域（如:root或全局样式文件顶层）调用，才能让所有组件读取到主题变量，否则组件无法获取颜色配置，自然无样式效果。

调色板"default-contrast"获取方法 #

可以获取调色板的default-contrast选项。在Angular Material 3的调色板系统中，每个颜色色调都对应配套的对比色，获取方式如下：

// 假设$light-theme是你的主题变量，primary为主色调
$primary-palette: mat.get-color-palette($light-theme, primary);
// 获取主色调默认色的对比色
$primary-default-contrast: map-get($primary-palette, default-contrast);

也可直接在样式中调用：

.custom-class {
  color: mat.get-color-from-palette($primary-palette, default-contrast);
}

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