原文链接：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 混合指令：
@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 的顺序。
<body class="light-theme">
Light theme
<sidenav class="dark-theme">With a dark sidenav!</sidenav>
</body>
<body class="dark-theme">
Dark theme
<sidenav class="light-theme">With a light sidenav!</sidenav>
</body>
通过直接定义 CSS 自定义属性，我们可以实现超越 Sass API 的细粒度定制。比如，我们可能希望强调用户特别应该谨慎的复选框：
<mat-checkbox class="scary-setting">Delete my account</mat-checkbox>
.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 混合气一样，这些属性会自动传递到它们被使用的地方，所以，如果你有一整章节需要定制复选框，你不需要将这个类应用到每一个复选框上，你只需要将它应用到这些定制的最高级别的元素就可以。
<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 指引进行新特性的尝试。
原文链接：https://juejin.cn/post/7339085241174917170 作者：Jimmy
