是的,Angular Material 提供了一些CSS 命名空间,使您可以直接在您的样式中使用颜色变量。这些命名空间包括$mat-、$mat-light-、$mat-dark-等。下面是一个用具有 $mat- 前缀的变量样式的示例:
.my-class {
background-color: $mat-red;
color: $mat-green-900;
}
除此之外,您还可以使用MatThemePalette 接口中定义的属性来访问主题颜色。下面是一个使用MatThemePalette 接口的例子:
import { Component } from '@angular/core';
import { MatThemePalette } from '@angular/material/core';
@Component({
selector: 'app-color-button',
template: `
`,
})
export class ColorButtonComponent {
constructor(private color: MatThemePalette) {}
}
在此示例中,我们从 @angular/material/core 中导入 MatThemePalette 接口,并将其注入到 ColorButtonComponent 中。然后,我们可以直接在模板中使用 color 对象的属性来设置背景颜色。