Angular 15中修改禁用状态下mat-form-field的背景与边框颜色

问题核心 #

你的自定义CSS未生效，主要是因为Angular的视图封装机制限制了组件内样式对MDC深层DOM结构的影响，同时MDC原生样式的优先级高于你的自定义规则。

修复方案 #

通过::ng-deep穿透视图封装，结合更精准的选择器覆盖原生样式，同时用:host限定作用范围避免全局污染：

/* 仅作用于当前组件内的表单域，避免全局样式污染 */
:host ::ng-deep {
  /* 自定义禁用状态输入框的背景色 */
  .mdc-text-field--disabled .mat-mdc-input-element {
    background-color: #你的禁用背景色 !important;
    /* 可选：修改禁用状态的文本颜色 */
    color: #你的禁用文本色 !important;
  }

  /* 自定义禁用状态的边框颜色，移除默认半透明效果 */
  .mdc-text-field--disabled .mdc-notched-outline__leading,
  .mdc-text-field--disabled .mdc-notched-outline__notch,
  .mdc-text-field--disabled .mdc-notched-outline__trailing {
    border-color: #你的禁用边框色 !important;
    opacity: 1 !important;
  }

  /* 保留你原有其他自定义样式 */
  .mat-mdc-input-element {
    color: blue !important;
  }
  
  .mdc-text-field--disabled,
  .mdc-text-field {
    margin-top: 5px !important;
    height: 45px !important;
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: 500;
    border-radius: 0px !important;
    letter-spacing: 0.05em;
  }

  .mat-mdc-form-field-error-wrapper {
    padding: 0px !important;
    margin: 0px !important;
    font-size: 9px;
    font-family: 'Roboto';
    font-weight: 600;
    text-transform: uppercase;
  }

  .mdc-notched-outline__leading,
  .mdc-notched-outline__notch,
  .mdc-notched-outline__trailing {
    border-radius: 0px !important;
    border-color: blue !important;
  }
}

关键细节说明 #

• :host 确保样式仅作用于当前组件，不会影响全局其他元素。
• ::ng-deep 打破Angular视图封装，让自定义样式能渗透到MDC组件内部的DOM节点。
• 输入框的背景色实际由.mat-mdc-input-element控制，而非外层的.mdc-text-field--disabled，需针对性修改。
• MDC禁用状态边框默认带opacity: 0.38的半透明效果，必须设置opacity: 1才能让自定义边框色完全显示。

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