访问在组件的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或文件中定义主题,而不仅仅是简单文件:sassscsscss

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';

2. 你得到这样的主要调色板:

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

3. 然后,你可以使用这样的颜色:

background: mat-color($primary);