Angular 18与Material升级后，MatCheckbox扩展组件CSS引用替代方案咨询

Angular Material 18重构了底层MDC样式的导入路径，原@material/checkbox/mdc-checkbox的直接引用方式已不再支持，推荐以下几种替代方案：

1. 导入Angular Material Checkbox的Sass模块 #

直接从Angular Material官方包导入样式模块，替代原MDC Web的直接引用：

@use '@angular/material/checkbox' as mat-checkbox;

之后你可以通过mat-checkbox命名空间访问Checkbox相关的Sass混入（mixin）和变量，比如复用主题样式：

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

2. 直接继承MatCheckbox的CSS类 #

如果你的自定义组件仅需要复用MatCheckbox的默认视觉样式，无需自定义Sass逻辑，可以在组件元数据中添加host配置，直接应用MatCheckbox的核心CSS类：

@Component({
  selector: 'app-custom-checkbox',
  template: `<!-- 自定义模板内容 -->`,
  styles: [`/* 你的自定义样式 */`],
  host: {
    class: 'mat-checkbox'
  }
})
export class CustomCheckboxComponent extends MatCheckbox {
  // 组件逻辑
}

3. 全局主题中确保Checkbox样式被导入 #

升级后需确认全局主题文件中已正确导入Checkbox的主题样式，否则自定义组件可能无法继承全局主题的颜色、字体等配置：

@use '@angular/material' as mat;

// 定义你的应用主题
$app-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    ),
  )
);

// 导入Checkbox主题样式
@include mat.checkbox-theme($app-theme);

内容的提问来源于stack exchange，提问作者김도균