angular-material - 访问预建方案的原色

Question

我建立了一个新项目使用

ng new app

ng add @angular/material

我在中包含以下行styles.css：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

我想将 deeppurple-amber 主题的原色应用于<p>元素。

如何提取预建方案的原色并将其应用于我自己在 Angular 6 中的组件？

Answer 1

不要导入预构建的主题，而是包含预构建主题的内容。

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

// Include non-theme styles for core.
@include mat-core();

// Define a theme.
$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200, A100, A400);

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

// Include all theme styles for the components.
@include angular-material-theme($theme);

然后，您可以访问调色板和颜色，并为您自己的组件设置主题。