Angular 2 Material 主题指的是 SCSS 中的颜色

Question

我已经使用官方指南创建了一个自定义主题。

@import '../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core();

$primary: mat-palette($mat-teal);
$accent: mat-palette($mat-deep-orange);
$warn: mat-palette($mat-amber);

$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

它确实有效。 我可以使用

md-toolbar

设置

md-button

或

$primary

的颜色。 但我无法访问组件 SCSS 中的颜色变量。

:host {
  .mat-grid-tile-header {
    background-color: $primary;
  }
}

网络风暴中的错误：

"Element 'primary' is resolved only by name without using of explicit imports"

构建失败后的错误： “未定义的变量”

好吧，我必须以某种方式导入它。但我不明白怎么办。

我尝试导入主题：

@import "../../../theme.scss";
    :host {
      .mat-grid-tile-header {
        background-color: $primary;
      }
    }

Webstorm中的错误已经消失，但是构建后出现了新的错误：

Module build failed: 
undefined
            ^
      (50: #e0f2f1, 100: #b2dfdb, 200: #80cbc4, 300: #4db6ac, 400: #26a69a, 500: #009688, 600: #00897b, 700: #00796b, 800: #00695c, 900: #004d40, A100: #a7ffeb, A200: #64ffda, A400: #1de9b6, A700: #00bfa5, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: white, 800: rgba(255, 255, 255, 0.87), 900: rgba(255, 255, 255, 0.87), A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: rgba(0, 0, 0, 0.87)), default: #009688, lighter: #b2dfdb, darker: #00796b, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": rgba(255, 255, 255, 0.87), "900-contrast": rgba(255, 255, 255, 0.87), "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": rgba(0, 0, 0, 0.87), "contrast-contrast": null) isn't a valid CSS value.

有人知道如何解决这个问题吗？ 预先感谢！

Answer 1

您需要使用

mat-color($primary)

中的

@angular/material/core/theming/_theming.scss

功能。它接收调色板并返回颜色。

Answer 2

这适用于 Angular 17，并且可能会在下一个版本中像往常一样使用 Angular Material 更改为另一个无意义的解决方案：

@use '@angular/material' as mat;
// for some reason you must access your theme file from the directory 
// where your component is. It will fail if you try to access it 
// from the root of the project. Also don't put the .scss extension.
@use '../../styles';

.my-class {
  // you must put "styles." before the variable name :
  color: mat.get-color-from-palette(styles.$myapp-primary, default);
}

当然他们必须在ANGULAR 18中再次更改它，令人难以置信：

如果您仍然使用 Angular Material 18 的“m2”主题：

@use '@angular/material' as mat;
// for some reason you must access your theme file from the directory 
// where your component is. It will fail if you try to access it 
// from the root of the project. Also don't put the .scss extension.
@use '../../styles';

.my-class {
  // you must put "styles." before the variable name :
  color:  mat.m2-get-color-from-palette(styles.$myapp-primary, default);
}

如果您将“m3”主题与 Angular Material 18 一起使用：

@use '@angular/material' as mat;
@use "../../../../my-theme" as *;

.my-class {
  color: mat.get-theme-color($app-theme, primary, 50);
}

请注意，如果您想将其分配给 m3 主题变量，语法会略有不同（注意

#{}

）：

html {
  // change the background color of the panel of all mat-select
  --mat-select-panel-background-color: #{mat.get-theme-color($app-theme, neutral, 100)};
}

对于 Angular 19 ：猜猜看，另一个 Angular 版本的新语法 🤪 ：

因此他们引入了一种声明主题的新方法，如果您使用它，您可以使用 css 变量访问颜色：

.my-class {
  color: var(--mat-sys-primary);
  background-color:  var(--mat-sys-tertiary);
}

您可以使用此处描述的不同变量访问调色板的不同色调（如果单击“其他可用颜色”，则有更多可用变量）。如果您想访问特定的阴影，那么您就不走运了，因为似乎只有其中几个变量可以访问。 另请注意，主题的 Angular 18 语法目前似乎仍然适用于 Angular 19。