升级Angular Material至15后MDC相关CSS覆盖失效问题求助

核心原因 #

Angular Material 15全面切换到MDC（Material Design Components）架构，组件的DOM结构、CSS类命名规则和样式优先级都发生了大幅变化，旧版本基于mat-*类的自定义样式自然失效。以下是针对性的解决方法：

通用解决步骤 #

1. 定位新的DOM结构与类名
   打开浏览器开发者工具，直接检查目标组件的DOM元素，确认MDC架构下的新类名（比如原mat-mdc-form-field-flex可能被替换为mdc-text-field__root或其他嵌套层级的类）。这是最关键的一步，所有样式调整都要基于实际的DOM结构。

2. 提升CSS特异性
   MDC组件的内置样式优先级很高，自定义样式需要通过组合父类选择器来提升特异性。比如原代码中.search-bar .mat-mdc-form-field-flex可以扩展为.search-bar .mdc-text-field .mdc-text-field__flex（根据实际DOM调整），或者直接在选择器末尾添加!important（仅在其他方法无效时使用，避免滥用）。

3. 正确使用::ng-deep与:host
   如果组件启用了默认的视图封装（ViewEncapsulation.Emulated），需要结合:host来限定::ng-deep的作用域，防止样式污染全局：

   :host ::ng-deep .search-bar .mdc-text-field__root {
     background-color: #fff;
   }
   

4. 优先使用官方CSS变量
   Angular Material 15的MDC组件暴露了大量可自定义的CSS变量，直接修改这些变量比覆盖类更简洁且不易失效。比如修改输入框背景色：

   .search-bar {
     --mdc-text-field-container-color: #fff;
   }
   

5. 迁移legacy外观组件
   代码中使用的mat-form-field-appearance-legacy在Angular Material 15中已被废弃，建议迁移到fill或outline外观，对应的类结构更符合MDC规范，也更容易自定义样式：

   <mat-form-field appearance="fill">
     <!-- 输入框内容 -->
   </mat-form-field>
   

针对你的代码的修改示例 #

基于MDC架构调整后的SCSS代码（需结合实际DOM验证类名）：

.search-bar {
  background-color: #dadce0;
  padding: 0;
  width: 350px;
  text-transform: uppercase;

  .mat-mdc-icon-button {
    transform: scale(1.4);

    &.search-icon:not([disabled]) .mat-icon {
      color: #fda57b;
    }

    &.sidenav-collapse-icon {
      background-color: #fff;
      transform: scale(0.7);
      border-radius: 0;
      padding-left: 10px !important;
      padding-top: 5px !important;

      .mat-icon {
        color: #808080;
      }
    }
  }

  // 替换legacy外观为fill
  .mat-form-field-appearance-fill {
    max-width: 40%;

    &.mat-form-field-disabled {
      :host ::ng-deep .mdc-text-field--disabled {
        background-color: #e6e6e6;
      }
    }

    // 使用CSS变量调整内边距
    --mdc-text-field-container-padding: 0;

    :host ::ng-deep .mdc-floating-label {
      margin-left: 5px;
    }

    :host ::ng-deep .mdc-text-field__input {
      text-transform: uppercase;
      padding-left: 5px;
    }

    :host ::ng-deep .mdc-text-field__suffix .mat-icon {
      transform: scale(0.7);
      cursor: pointer;
    }

    :host ::ng-deep .mdc-line-ripple {
      bottom: 0;
    }
  }

  .st-pb-1 {
    padding-bottom: 3px;
  }
}

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