如何使用 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'

$my-palette: mat.define-palette(mat.$primary-palette)

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

Answer 1

哦是的。如果你想设计你的材质应用程序，这是非常棘手的。首先，为了更好地理解要做什么，请查看材质设计器：链接。使用它您可以创建您的自定义样式。

第二：这是 Academind 提供的一个很好的视频教程。在这里您可以了解什么是待办事项并使用您链接的文档检查所有内容。您所需要做的就是在本文档中。但写得非常疯狂。所以这个视频会有帮助！

但这里有一个快速指南：

1. 首先创建一个新文件（以 my-theme.scss 为例）
2. 在主题文件中添加：

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 density: 0,
));

// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($my-theme);

// Emit styles for MatButton based on `$my-theme`. Because the configuration
// passed to `define-light-theme` omits typography, `button-theme` will not
// emit any typography styles.
@include mat.button-theme($my-theme);

// Include the theme mixins for other components you use here.

好的，现在打开 angular.json 文件并转到该"styles"部分。node_modules/@angular/material/prebuilt-themes/.......您想在“输入”属性中 找到类似的内容。

将其替换为您的主题：

然后重新启动您的应用程序（再次调用 ngserve 因为我们更改了 angular.json）。而且它也会起作用！