如何使主题与 Angular 18 和 Materials 3 兼容

Question

我无法理解为什么会遇到这些问题 我尝试关注大量会话，观看视频，但到目前为止我发现的所有内容都取决于 app.module.ts，这不是 Angular 18 的默认值或降级到 Materials 2。

我对此很陌生，并且已经尝试重新创建该应用程序大约 10 次

这是我遇到的问题

src/styles.scss 5:11  root stylesheet [plugin angular-sass]

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';

这是我的styles.scss

@use '@angular/material' as mat;
@include mat.core();

$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette);

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

@include mat.all-component-themes($my-app-theme);

body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
}

这里是package.json

@angular/compiler": "^18.2.0",
  "@angular/core": "^18.2.0",
  "@angular/forms": "^18.2.0",
  "@angular/material": "^18.2.11",
  "@angular/platform-browser": "^18.2.0",
  "@angular/platform-browser-dynamic": "^18.2.0",
  "@angular/router": "^18.2.0",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.10"
},
"devDependencies": {
  "@angular-devkit/build-angular": "^18.2.10",
  "@angular/cli": "^18.2.10",
  "@angular/compiler-cli": "^18.2.0",
  "@types/jasmine": "~5.1.0",
  "jasmine-core": "~5.2.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.2.0",
  "karma-coverage": "~2.2.0",
  "karma-jasmine": "~5.1.0",

Answer 1

如果您想继续使用 m2 主题，那么您只需将

mat.define-palette

等方法替换为前缀

mat.m2-define-palette

即可。这也适用于调色板：

mat.$indigo-palette

应更改为

mat.$m2-indigo-palette

。

@use '@angular/material' as mat;
@include mat.core();

$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$accent: mat.m2-define-palette(mat.$m2-pink-palette);

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

@include mat.all-component-themes($my-app-theme);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

Stackblitz 演示

---

使用材质 3 时，不能使用

mat.$indigo-palette

和

mat.$blue-palette

，因为它们是 m2 主题。相反，请选择 m3 主题。

主题.md

- `$red-palette`
- `$green-palette`
- `$blue-palette`
- `$yellow-palette`
- `$cyan-palette`
- `$magenta-palette`
- `$orange-palette`
- `$chartreuse-palette`
- `$spring-green-palette`
- `$azure-palette`
- `$violet-palette`
- `$rose-palette`

因此使用这些主题的新格式如下所示。

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$blue-palette,
      tertiary: mat.$magenta-palette,
    ),
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

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

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

Stackblitz 演示