Angular Material 3 主题不包括所有样式，如立面或颜色

Question

截至今天，我一直在使用最新 Angular 18.0.0 版本中的新 Angular

Material 3 设计风格。已尝试遵循文档here。以下是我到目前为止所做的事情。

@use '@angular/material' as mat;
@include mat.core();
@include mat.all-component-typographies();

$m3-light-theme: mat.define-theme();

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

大多数风格似乎都适用。然而，这似乎缺少实时样式“

mat-elevation”，并且组件上的color属性似乎没有效果。

如果我创建一个像下面这样的

Material 2 主题并将其添加到我的样式表中，那么标高和颜色就可以工作了。

$app-theme:     mat.m2-define-light-theme((
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    )
   ));

:root {
    @include mat.all-component-themes($app-theme-custom-foreground);
    @include mat.all-component-themes($m3-light-theme);
}

问题是我们应该同时包含材料 2 和材料 3 主题吗？从文档来看，您似乎应该只应用您想要的主题，但 Material 3 方式似乎并不包括所有内容。

Answer 1

您需要包括以下内容，以便使用以前的颜色变体，但它不一样。

:root {
    @include mat.all-component-themes($m3-light-theme);
    @include mat.color-variants-backwards-compatibility($m3-light-theme);
}

一般来说，你需要使用类（mat-primary、mat-accent、mat-warn）。

通常文档需要更新而不包含颜色变体，因为它具有误导性。 （

https://material.angular.io/components/button/overview）

如果找到其他方法我会更新。但我认为这就是方法。

这也很有帮助

https://medium.com/@raultonello18/angular-material-m3-dynamic-runtime-colors-6d6d1036d2bb