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

Question

我已经在角度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);