如何使用 Angular Material 主题面板

Question

令我震惊的是，实际开始使用 Angular Material 预装主题是多么困难，而且关于它的教程又是多么少。我正在尝试使用官方文档中解释的函数来使用主题中的值：

https://material.angular.io/guide/theming-your-components

但是，当我尝试运行此代码时

@use 'sass:map'
@use '@angular/material' as mat

@import './styles/normalize.css'
@import 'ag-grid-community/styles/ag-grid.css'
@import 'ag-grid-community/styles/ag-theme-material.css'

$我的调色板: mat.define-palette(mat.$primary-palette)

我收到 $theme 未定义的 SASS 错误。错误在哪里？

Answer 1

看起来您正在使用 Angular Material 主题引擎中的 mat.get-color-config 函数，但您没有向它传递有效的主题。您在代码中使用的 $theme 变量未定义，这会导致 SASS 错误。

要使用 mat.get-color-config 函数，您需要将一个有效的主题对象作为参数传递给它。您可以将预安装的主题混合传递给它，例如 mat-light-theme 或 mat-dark-theme，或者您可以将您使用 mat-light-theme 或 mat-dark- 创建的自定义主题传递给它主题混合。

这是一个示例，说明如何将 mat.get-color-config 函数与预安装的主题混合一起使用：

@import '~@angular/material/theming';
@include mat-core();

$theme: mat-light-theme();
$color-config: mat.get-color-config($theme);

'或者，您可以将 mat.get-color-config 函数与您创建的自定义主题一起使用：'

@import '~@angular/material/theming';
@include mat-core();
$my-custom-palette: mat-palette(...);
$theme: mat-light-theme($my-custom-palette);
$color-config: mat.get-color-config($theme);