Angular 材质 io 预定义主题颜色

Question

如何从预定义的角度主题 @angular/material/prebuilt-themes/deeppurple-amber.css' 访问 scss 文件中的颜色变量（$primary、$accent、$warn、$foreground、$background）？

Answer 1

创建_variable.scss

// Import material theming functions
@import '~@angular/material/theming';

// Create your Sass color vars
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
$warn: mat-color($app-warn);

将 _variables.scss 导入到组件的 sass 文件中你想使用它的地方。

@import "~_variables.scss";
.selected {
  background-color: $accent;
}

不要忘记在 .angular-cli.json 文件中包含 theme.scss：

{
...
  "apps": [{
  ...
  "styles": ["_variables.scss"]
  }]
  ...
}

如果你仍然没有得到，请通过这个链接 https://medium.com/@aleixsuau/how-to-use-angular-material-2-sass-variables-in-your-components-76ce0203f126

Answer 2

一旦将 sass 文件编译为 css，该 css 文件中就不再有变量的概念，因此您将无法从 deeppurple-amber.css 检索像 $primary 这样的变量。

如果您查看deeppurple-amber 主题的scss source file，您可以找到$primary 和其他变量的定义

$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200, A100, A400);

mat-palette 函数和基本调色板颜色可在您的项目中从'~@angular/material/theming' 获得；

所以要检索调色板和颜色，您可以尝试以下创建：

步骤#1创建文件mat-vars.scss文件

ma​​t-vars.scss

@import '~@angular/material/theming';
//And then retrieve the palette

$myPrimaryPaletteVariable : mat-palette($mat-deep-purple);
$myAccentPaletteVariable : mat-palette($mat-amber, A200, A100, A400);

//Retrive the colors you need
$myPrimaryColor : mat-color($myPrimaryPaletteVariable);

步骤 #2 在您的组件 scss 文件中，只需导入该新文件并使用变量

component.scss

@import '../../mat-vars';//ensure path is correct
.myText
{
    color: $myPrimaryColor;
}