Question

我正在尝试在我的一个组件中使用已定义的Sass变量，但似乎这种颜色不是全局导出的，或者根本不是这种方式。

在我的 style.scss 文件中，我声明了一种颜色$foo

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

$foo: mat-color($mat-blue, 50);

我正在尝试将这种颜色应用到我的一个组件中（就像使用primary，accent或warn一样：

<button mat-fab color="foo">
  OK
</button>

但是，这不起作用，我想知道/理解为什么会这样。

我一直在读the docs和some tutorials this guideline，但似乎找不到更详细的信息。

Answer 1

根据AFAIK，除Angular定义的颜色属性外，您无法指定其他颜色属性。我不是这方面的专家，但是我要做的是创建类并使用它：

$foo: mat-color($mat-blue, 50);

.mat-foo {
  color: $foo !important;
}

然后...

<button mat-fab class="mat-foo">OK</button>

另一种方法可能是创建attribute directive。这样，如果您更改班级或其他任何内容，则只能在一个地方进行更改。

import {Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[yourappFoo]'
})
export class FooDirective {

  @HostBinding('class.mat-foo') c = true;

  constructor() {
  }
}

...并且：

<button mat-fab yourappFoo>OK</button>

如何导出自定义颜色并在组件中使用它们？

1 个答案: