Question

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

Answer 1

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

如果您查看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文件

mat-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;
}

Answer 2

创建_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

角度材质io预定义主题颜色

2 个答案: