Angular 15 MDC迁移：如何处理slide-toggle的TODO样式问题？

**.D(手动，付
%甚至，ADA负责they，直接给出替换后的代码，然后说明对应关系，再给出批量处理的技巧，最后标注来源。

现在调整成正确的内容：

直接替换旧类为MDC标准类 #

原代码中的.mat-slide-toggle-bar等内部类在MDC版本中已被替换为Material Design Components的标准类，直接替换即可在组件范围内生效，无需修改全局主题：

替换后的完整样式代码 #

.mat-mdc-slide-toggle {
  height: 14px;
  line-height: 14px;

  /* 替换原.mat-slide-toggle-bar */
  .mdc-switch__track {
    height: 8px;
    width: 28px;
    border-radius: 4px;
  }

  /* 替换原.mat-slide-toggle-thumb-container + .mat-slide-toggle-thumb */
  .mdc-switch__handle-track {
    height: 14px;
    width: 14px;

    .mdc-switch__handle {
      height: 14px;
      width: 14px;
    }
  }

  /* 替换原.mat-slide-toggle-ripple */
  .mdc-switch__ripple {
    top: calc(50% - 14px);
    left: calc(50% - 14px);
    height: 28px;
    width: 28px;
  }
}

组件内样式生效注意事项 #

• 默认ViewEncapsulation.Emulated模式下，上述样式会自动作用于当前组件内的mat-mdc-slide-toggle元素，不会影响全局。
• 若遇到样式优先级不足的情况，可在选择器前添加:host限定组件宿主范围，提升优先级：

:host .mat-mdc-slide-toggle {
  /* 上述样式内容 */
}

批量处理TODO问题的高效技巧 #

• 利用IDE的全局替换功能，批量替换项目中重复出现的旧类名：
  • .mat-slide-toggle-bar → .mdc-switch__track
  • .mat-slide-toggle-thumb-container → .mdc-switch__handle-track
  • .mat-slide-toggle-thumb → .mdc-switch__handle
  • .mat-slide-toggle-ripple → .mdc-switch__ripple
• 替换后逐个组件验证样式效果，避免全局替换导致的意外适配问题。

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