angular - 访问在组件的 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文件:

主题.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';

你会得到这样的主调色板:

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

然后，您可以使用这样的颜色:

背景:mat-color($primary);