Angular中文博客
分享让你更聪明
我们很高兴地宣布 Angular 17.2 在 Angular Material 中提供了对 Material 3 主题的实验性支持。
在这篇博文中，我们将向您通报有关此功能的最新消息，并预览 Material 3 支持的下一内容。
Material 3 是 Google 开源设计系统 Material Design 的最新演进。 Material 3 for Angular 是作为替代主题实现的，与您今天使用的相同Angular Material 组件和 Sass mixins 兼容。
Material 3 主题基于设计标记（作为 CSS 自定义属性实现）。这使您可以更轻松地覆盖主题，而无需增加 CSS 选择器的特异性。
它还使您能够精细地覆盖特定属性，而无需将 CSS 选择器定位到内部 Angular Material 元素。
要在您的应用中使用 Material 3，请使用 matx.define-theme 在 Sass 中创建一个 M3 主题，并将其传递给您当前使用的相同 Angular Material Sass mixin：
@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 mixin 一样，这些属性会流向它们的使用位置，因此，如果您有一整段可怕的复选框，则不需要将此类应用于所有这些，您只需将其应用于应应用自定义的最高级别元素。
<section class="scary-setting">
<mat-checkbox>Delete my account</mat-checkbox>
<mat-checkbox>Also drain my bank account</mat-checkbox>
</section>虽然我们非常兴奋地推出 Material 3，并且迫不及待地想让您尝试一下，但 Material 2 主题仍然得到完全支持。
M2 和 M3 主题的处理方式存在一些差异，最明显的是在组件颜色变体方面。您可以在我们的Material 3 使用指南中详细了解这些差异。
我们很高兴与 Angular 社区中的所有人分享此更新。我们迫不及待地想听到您的反馈——请在这篇文章中留下评论，让我们知道您的想法。今天，您可以通过转到我们的Material 3 指南来尝试此功能。我们将继续致力于自定义调色板生成、系统级令牌的 CSS 变量，并完善 API 以使其达到稳定状态。
感谢您的阅读。
原文链接：https://blog.angular.dev/material-3-experimental-support-in-angular-17-2-8e681dde650e
翻译来源：https://zhuanlan.zhihu.com/p/682683706