如何在自定义SCSS中使用Angular Material预构建主题的颜色？

当然可以！Angular Material 确实会把主题里的各种颜色色调以 SCSS 变量的形式暴露出来，让你能在自定义 SCSS 代码里直接调用，完全匹配你示例里的需求～

1. 先导入主题相关 SCSS 文件 #

首先要在你的自定义 SCSS 文件顶部，导入 Angular Material 的主题工具和项目里的主题文件（如果是自定义主题的话）：

// 导入Material的基础主题工具
@import '@angular/material/theming';
// 导入你项目的自定义主题文件（假设文件名为theme.scss）
@import './theme';

2. 直接使用预定义的主题颜色变量 #

Angular Material 的内置主题会生成一套命名规范的 SCSS 变量，覆盖主色、强调色、警告色的所有深浅色调：

• 主色调系列：$mat-primary-50、$mat-primary-100、$mat-primary-500（默认主色）、$mat-primary-700 等
• 强调色系列：$mat-accent-50、$mat-accent-200、$mat-accent-700 等
• 警告色系列：$mat-warn-100、$mat-warn-600、$mat-warn-900 等

你可以直接在样式里引用这些变量，就像你示例里写的那样：

.my_tab_group {
  border: 1px solid $mat-primary-500; // 使用主色调的默认标准色值
}

3. 自定义主题下的变量调用 #

如果你的项目用了自定义主题，比如你定义了这样的调色板：

$my-primary: mat-palette($mat-indigo);
$my-accent: mat-palette($mat-pink, A200, A100, A400);
$my-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
@include angular-material-theme($my-theme);

那你还可以通过 map-get 方法直接提取自定义调色板里的指定色调：

.my_tab_group {
  border: 1px solid map-get($my-primary, 500); // 获取自定义主色的标准值
}

小技巧 #

要是不确定有哪些可用变量，你可以在 SCSS 里用 @debug 指令输出主题信息，比如 @debug $my-theme;，就能在控制台看到所有可调用的颜色色调细节啦～

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