Angular 18中mat-slide-toggle未应用Material 3主题样式的问题

我使用Angular 18（18.1.2）搭配Material（18.1.2）开发应用时，遇到一个异常问题：mat-slide-toggle完全未应用主题样式，外观类似Angular 15之前的旧版本。其他所有Material组件都能正常读取我生成的Material 3主题颜色（粉色），只有滑动开关不生效。

组件代码 #

something.component.html #

<mat-slide-toggle [(ngModel)]="editMode"> Edit mode </mat-slide-toggle>

@if (editMode) {
<button mat-stroked-button> Button </button>
}

something.component.ts #

import { Component } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-something',
  standalone: true,
  imports: [MatSlideToggleModule, FormsModule],
  templateUrl: 'something.component.html',
})
export class SomethingComponent {
  editMode: boolean = false;
}

效果对比 #

预期效果 #

滑动开关应采用Material官方文档中的样式，使用主题主色（粉色）：

实际效果 #

滑动开关未使用主题粉色（按钮已正常显示粉色），外观类似Angular 14的旧版MDC滑动开关：

编辑补充：样式文件内容 #

styles.scss #

// Import Angular Material theming
@use '@angular/material' as mat;
@use './theming/m3-theme' as m3;

// Import Tailwind CSS base, components, and utilities
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// Apply the custom themes for Angular Material
html {
  @include mat.all-component-colors(m3.$light-theme);
  @include mat.core-theme(m3.$light-theme);
  @include mat.button-theme(m3.$light-theme);

  @media (prefers-color-scheme: dark) {
    @include mat.all-component-colors(m3.$dark-theme);
  }

}

m3-theme.scss #

// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #e64d87
$_palettes: (
  primary: (
    0: #000000,
    10: #3f001c,
    20: #650031,
    25: #79003c,
    30: #8e0047,
    35: #a01053,
    40: #b1215f,
    50: #d23d78,
    60: #f45891,
    70: #ff84ac,
    80: #ffb1c6,
    90: #ffd9e1,
    95: #ffecef,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #2b151c,
    20: #422930,
    25: #4e343b,
    30: #5b3f47,
    35: #674b52,
    40: #74565e,
    50: #8f6f77,
    60: #aa8890,
    70: #c6a2aa,
    80: #e3bdc6,
    90: #ffd9e1,
    95: #ffecef,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #2d1600,
    20: #47290b,
    25: #543415,
    30: #613f1f,
    35: #6e4b29,
    40: #7c5634,
    50: #976f4a,
    60: #b48862,
    70: #d1a27a,
    80: #eebd93,
    90: #ffdcc0,
    95: #ffeee2,
    98: #fff8f5,
    99: #fffbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    10: #201a1b,
    20: #352f30,
    25: #413a3b,
    30: #4c4546,
    35: #585052,
    40: #655c5e,
    50: #7e7576,
    60: #988e90,
    70: #b3a9aa,
    80: #cfc4c5,
    90: #ece0e1,
    95: #faeeef,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
    4: #120d0e,
    6: #171213,
    12: #241e1f,
    17: #2f282a,
    22: #3a3334,
    24: #3e3739,
    87: #e3d7d9,
    92: #f1e5e7,
    94: #f7ebec,
    96: #fdf1f2,
  ),
  neutral-variant: (
    0: #000000,
    10: #24191b,
    20: #3a2d30,
    25: #45383b,
    30: #514346,
    35: #5d4f52,
    40: #6a5a5e,
    50: #837376,
    60: #9e8c90,
    70: #b9a7aa,
    80: #d6c2c5,
    90: #f2dde1,
    95: #ffecef,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
));
$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
));

编辑补充2 #

按照建议导入组件主题后，样式有所改善但仍不符合预期：

编辑补充3 #

发现滑动开关上被莫名添加了mat-accent类，尝试通过以下代码显式设置主色：

@mixin color($theme) {
  .primary-toggle {
    @include mat.slide-toggle-color($theme, $color-variant : primary);
    background-color: red;
  }
}

Mixin已生效（能看到红色背景），但滑动开关的颜色仍未变为主题主色。

我哪里操作错了？

内容的提问来源于stack exchange，提问作者Sofya