访问在组件的 scss 中定义的自定义主题的原色

Question

我在 Angular 4 中定义了一个自定义主题，并希望在我的组件的一个 scss 文件中使用它

基本上我希望特定 mat-grid-tile 的背景是原色

下面是我的自定义主题

@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

下面是我尝试访问的组件的 scss 代码

@import '/src/styles.css';


:host {             // host targets selector: 'home'

        display: block;
        left: 0;

        width: 100%;  


        height: 100%;
}

.selected {
    background: map-get($candy-app-theme,primary);
    color:"white";
}

编译失败静态错误，变量“$candy-app-theme”未定义，但在styles.scss中定义

我刚刚开始使用 Angular 4，因此我对此非常不清楚。 如果需要任何进一步的代码，请告诉我

注意：来自 /src/styles.scss 和 '../../../styles.scss' 的路径都可以正确解析，但它们都不能解析变量

Answer 1

编辑：其实这不是推荐的方式...

您应该使用文档中描述的 mixins，而不是在组件中导入主题：https://material.angular.io/guide/theming-your-components

原答案：

首先，在单独的文件中定义您的自定义主题（推荐）：

注意在less 或sass/scss 文件中定义您的主题，而不仅仅是简单的css 文件：

theme.scss

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

@include mat-core();

$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-yellow);
$warn:    mat-palette($mat-red);

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

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

然后，在您想要使用自定义主题的文件中：

1. 导入主题文件：

@import '../../../theme.scss';

1. 你会得到这样的主调色板：

$primary: map-get($theme, primary);

1. 然后，您可以像这样使用颜色：

background: mat-color($primary);