更新到Angular 18和Material后，应用CSS的方法发生了变化

Question

我通过扩展 MatCheckbox 创建了一个自定义组件。

在更新之前，我可以使用以下方法应用默认 CSS：

scss

@use '@material/checkbox/mdc-checkbox';

但是，将 Angular 和 Material 升级到版本 18 后，@use '@material/checkbox/mdc-checkbox'；不再存在。实现相同功能的推荐替代方案是什么？

Answer 1

在 Angular 18 中，您可以通过两种方式将主题导入到组件中。

使用以下方法一次性导入所有单独的组件主题：

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

或者一一使用：

@include mat.checkbox-theme(theme.$theme);

了解组件主题的完整列表 - _all-theme.scss

所以你首先需要在全局

styles.scss

文件中定义基本主题。

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-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);

在组件中完成此操作后，您可以导入此主题并使用基本主题对其进行样式设置。

@use '@angular/material' as mat;
@use '../styles' as theme;

:host {
  @include mat.checkbox-theme(theme.$theme);
}

Stackblitz 演示