Angular Material自定义组件主题：自定义调色板颜色使用及导入疑问

嘿，我来帮你搞定这个问题！你说得对，Angular Material确实强调主题文件不能随便导入到其他SCSS里，不然会搞出重复样式的麻烦，但组件里照样能用上自定义调色板的颜色，给你两种靠谱的方案：

方案一：用SCSS变量+Material颜色函数（可控性强） #

首先咱得把自定义调色板和主题文件拆分开，避免导入主题时带进来一堆重复样式：

1. 先新建一个单独的SCSS文件（比如src/styles/_custom-palettes.scss），专门放你的自定义调色板变量：

// 这里只定义调色板，不生成主题或引入组件样式
$custom-primary: mat.define-palette(mat.$indigo-palette, 500, 300, 700);
$custom-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$custom-warn: mat.define-palette(mat.$red-palette);

2. 在你的主题文件（比如src/styles/custom-theme.scss）里导入这个调色板文件，用来构建主题：

@import './_custom-palettes';

// 构建自定义主题
$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  )
));

// 给Material组件应用主题（这部分别在其他文件里重复引入）
@include mat.all-component-themes($custom-theme);

3. 现在在你的组件SCSS里，只导入那个纯变量的调色板文件，就能用Material的颜色函数来取色了：

// 只导入调色板变量，不会带进来重复样式
@import '../../styles/_custom-palettes';

// 给自定义div（带图标）用主色调背景
.icon-wrapper {
  margin: 1rem;
  background-color: mat.get-color-from-palette($custom-primary, 500);
  padding: 0.5rem;
  border-radius: 4px;
  // 顺便加个可读的文字颜色
  color: mat.get-color-from-palette($custom-primary, contrast-500);
}

// 如果想自定义mat-toolbar的样式（默认主题已经会给它主色，这里是示例）
.custom-toolbar {
  background-color: mat.get-color-from-palette($custom-accent, 400);
}

方案二：直接用主题生成的CSS自定义属性（更简便） #

Angular Material在应用主题时，会自动生成一系列全局CSS变量，比如主色、强调色对应的变量，你可以直接在组件里用，连SCSS文件都不用导入：

// 给mat-toolbar用主题主色（其实默认已经是了，这里是自定义示例）
.custom-toolbar {
  background-color: var(--mdc-theme-primary);
  color: var(--mdc-theme-on-primary); // 自动匹配的对比色，保证文字可读性
}

// 给带图标的div用自定义色调
.icon-wrapper {
  margin: 1rem;
  background-color: var(--mdc-theme-secondary-container);
  padding: 0.5rem;
  border-radius: 4px;
}

这种方法最省心，而且完全不用担心重复样式的问题，因为这些变量是全局的，直接用就行。

注意点 #

• 绝对不要把你的主题文件（就是包含@include mat.all-component-themes()的那个）导入到任何组件SCSS里，这是重复样式的根源。
• 如果用方案一，一定要保证调色板文件里只有变量定义，没有任何会生成CSS的混合器调用。

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