我找到了一个很棒的解决方法！！！！
我很高兴能展示这一点，因为它多年来一直困扰着我如何实现这一点。
所以这里是;
首先，将所有 css 文件更改为 scss；
对于现有项目
在控制台运行ng set defaults.styleExt=scss
（ng set 似乎已被贬值，但感谢用户@wlyles get/set have been deprecated in favor of the config command，您可以查看此修复）
- 将所有现有的
.css 文件重命名为.scss
- 手动将
.angular-cli.json中styles的文件扩展名从.css改为.scss
- 如果您没有使用 WebStorm Refactor 之类的工具进行重命名，请手动将所有
styleUrls 从 .css 更改为 .scss
对于未来的项目
现在您需要在您的应用根目录中拥有一个 theme.scss 文件，如下所示：
现在，您要在 style.scss 文件中添加以下内容（如您所见，我引用了背景颜色，但您可以将其更改为任何元素以根据需要为您的网站设置主题）：
编辑：你不需要把这个自定义的@mixin 元素放在你的styles.scss 中，你可以把它放在你的任何一个*name*.component.scss 中，然后简单地导入并包含它，就像你一样按照给出的例子做！
@import '~@angular/material/theming';
// Define a custom mixin that takes in the current theme
@mixin theme-color-grabber($theme) {
// Parse the theme and create variables for each color in the pallete
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
// Create theme specfic styles
.primaryColorBG {
background-color: mat-color($primary);
}
.accentColorBG {
background-color: mat-color($accent);
}
.warnColorBG {
background-color: mat-color($warn);
}
}
现在转到您用于主题化 Material 2 项目的 theme.scss 文件，如果您需要帮助主题化，请查看：Material 2 Github - Theming guide
现在打开你的 theme.scss 并导入你的 style.scss，因为我的 theme.scss 位于 /src/app/theme.scss 文件夹的根目录中，我必须首先走出它来引用我的 /src/styles.scss 全局样式文件，如下所示；
@import '../styles';
然后我们必须在ALL我们的主题中包含我们创建的新自定义@mixin（如果您像我一样有多个，那么它会根据当前选择的主题改变颜色）。
将它包含在实际的 angular-material-theme include 之上，如下所示：
@include theme-color-grabber($theme);
@include angular-material-theme($theme);
如果您有像我这样的主题，请将其添加到相同的位置，如下所示：
.light {
$light-primary: mat-palette($mat-blue, 200,300, 900);
$light-accent: mat-palette($mat-light-blue, 600, 100, 800);
$light-warn: mat-palette($mat-red, 600);
$light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
@include theme-color-grabber($light-theme);
@include angular-material-theme($light-theme);
}
你可以看到我在包含上方添加了我的theme-color-grabber，它是否高于或低于实际主题并不重要，因为它获取主题颜色是重点。
我的整个themes.scss 看起来像这样：
@import '~@angular/material/theming';
//We import our custom scss component here
@import '../styles';
@include mat-core();
$theme-primary: mat-palette($mat-red);
$theme-accent: mat-palette($mat-deep-orange, A200, A100, A400);
$theme-warn: mat-palette($mat-red);
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
//
@include theme-color-grabber($theme);
@include angular-material-theme($theme);
.light {
$light-primary: mat-palette($mat-blue, 200,300, 900);
$light-accent: mat-palette($mat-light-blue, 600, 100, 800);
$light-warn: mat-palette($mat-red, 600);
$light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
@include theme-color-grabber($light-theme);
@include angular-material-theme($light-theme);
}
最后，我们现在可以在任何地方调用我们的主题颜色作为背景！例如，我给mat-grid-tile 'primary' 颜色（它不采用 color='' 参数，就像其他元素一样，例如mat-toolbar) 只需将其类设置为适当的类名，如下所示：
编辑：在您的每个组件 scss 文件中，您需要 import '<path-to>/theme.scss' 才能使您的主题应用于该组件。不要在styles.scss 中导入theme.scss，因为这会创建一个导入循环！
<mat-grid-list cols="4" rows="4" rowHeight="100px">
<mat-grid-tile
colspan="4"
rowspan="5"
class="primaryColorBG">
<div fxLayout="column" fxLayoutAlign="center center">
<h1 class="title-font">Callum</h1>
<h1 class="title-font">Tech</h1>
</div>
<p>
Ambitious and ready to take on the world of Information Technology,<br>
my love for programming and all things I.T. has not wavered since I first got access<br>
to my fathers computer at age 9.
</p>
</mat-grid-tile>
</mat-grid-list>
最后我们的结果会是这样的！：
红色主题激活
蓝色主题激活