Material 3 在 Angular v17.2 中实验性支持

原文链接：Material3 Experimental Support in Angular 17.2 - 原文作者 Miles Malerba
本文采用意译的方式

我们非常高兴地宣布：Angular 17.2 版本在 Angular Material 中提供了对 Material 3 主题的实验性支持。

本文告知你一个上面最新的消息，然后提供该特性一些 Material 3 支持的预览。

Material 3 是什么

Material 3 是 Material Design 的最新版本，它是谷歌设计的开源 UI 系统。Angular 中的 Material 3 可作为选择性的主题去应用，和我们现在使用的相同的 Angular Material components和 Sass mixins 兼容。

Material 3 主题基于设计 tokens（以 CSS 自定义属性的形式实现）。这让我们更容易地重写主题，而不需要增加 CSS 选择器特异性。它还能使我们精确地覆盖特性属性，而不需要针对内部 Angular Material 元素定位 CSS 选择器。

在应用中使用 Material 3

在我们应用中使用 Material 3，先在 Sass 中使用 matx.define-theme 创建一个 M3 主题，然后将其传递给我们当前使用的相同 Angular Material Sass 混合指令：

scss 复制代码

@use '@angular/material' as mat;
@use '@angular/material-experimental' as matx;

$m3-dark-theme: matx.define-theme((
  color: (
    theme-type: dark,
    primary: matx.$m3-indigo-palette,
    tertiary: matx.$m3-blue-palette,
  )
));

$m3-light-theme: matx.define-theme((
  color: (
    primary: matx.$m3-indigo-palette,
    tertiary: matx.$m3-blue-palette,
    )
));

.dark-theme {
  @include mat.all-component-themes($m3-dark-theme);
}

.light-theme {
  @include mat.all-component-themes($m3-light-theme);
}

因为 M3 主题完全基于 CSS 自定义属性，所有的主题，颜色，字体和粗细等混合指令保证只输出 CSS 自定义属性，没有额外的选择器特异性。这意味着，我们可以在更高层次自定义属性，并让它们向下流动到依赖它们的组件。我们可以为应用的一个章节重写主题，而不需要关心选择器的差异性。比如，下面的两种布局都按照我们想要的方式工作，如论在 Sass 中如何定义 .dark-theme 和 .light-theme 的顺序。

scss 复制代码

<body class="light-theme">  
Light theme  
<sidenav class="dark-theme">With a dark sidenav!</sidenav>  
</body>

scss 复制代码

<body class="dark-theme">  
Dark theme  
<sidenav class="light-theme">With a light sidenav!</sidenav>  
</body>

通过直接定义 CSS 自定义属性，我们可以实现超越 Sass API 的细粒度定制。比如，我们可能希望强调用户特别应该谨慎的复选框：

html 复制代码

<mat-checkbox class="scary-setting">Delete my account</mat-checkbox>

scss 复制代码

.scary-setting {  
// No need to target any internal checkbox selectors! 🎉  
- mdc-checkbox-unselected-hover-state-layer-color: red;  
- mdc-checkbox-unselected-hover-icon-color: red;  
}

与官方 Sass 混合气一样，这些属性会自动传递到它们被使用的地方，所以，如果你有一整章节需要定制复选框，你不需要将这个类应用到每一个复选框上，你只需要将它应用到这些定制的最高级别的元素就可以。

html 复制代码

<section class="scary-setting">  
<mat-checkbox>Delete my account</mat-checkbox>  
<mat-checkbox>Also drain my bank account</mat-checkbox>  
</section>

支持 Material 2

虽然我们很高兴介绍了 Material 3，并且希望你们能够去尝试，但是 Material 2 还是全面支持的。

M2 和 M3 主题的处理方式有一些不同。其中最明显的区别是组件颜色变量的处理。我们可以在 guide to using Material 3 文章中了解这些差异。

现在就开始

很高兴在 Angular 社区分享了这个更新内容。我们现在可以通过 guide to Material 3 指引进行新特性的尝试。