如何修改Angular Material中mat-form-field搜索框的边框样式？

方法一：使用appearance="none"移除Material默认样式，自定义普通文本框样式 #

先修改模板，给mat-form-field添加appearance="none"属性，直接去掉Material自带的边框/下划线：

<mat-form-field class="custom-form-field" appearance="none">
    <input matInput type="text" id="onSearch" (keyup)="keyUp($event)">
    <mat-icon matPrefix class="centered-icon">search</mat-icon>
</mat-form-field>

然后在SCSS中自定义输入框样式，模拟原生普通文本框：

.custom-form-field {
  // 输入框基础样式
  input.mat-input-element {
    border: 1px solid #ccc;
    padding: 8px 12px 8px 40px; // 左侧预留空间给搜索图标
    border-radius: 4px;
    font-size: 14px;
  }

  // 输入框聚焦状态样式
  input.mat-input-element:focus {
    outline: none;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
  }

  // 调整搜索图标的位置，避免被输入框边框遮挡
  .mat-form-field-prefix {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
}

方法二：覆盖Material组件的默认状态样式（适合保留部分Material特性的场景） #

如果不想完全剥离Material的组件结构，可通过样式穿透覆盖mat-form-field的悬停、聚焦状态，隐藏默认边框：

// 可写在全局样式文件（如styles.scss），或在组件内使用::ng-deep穿透视图封装
::ng-deep .custom-form-field {
  // 隐藏悬停时的黑色边框
  &:hover .mat-form-field-outline {
    border-color: transparent !important;
  }

  // 隐藏聚焦时的蓝色边框
  &.mat-focused .mat-form-field-outline {
    border-color: transparent !important;
  }

  // 隐藏默认下划线
  .mat-form-field-underline,
  &:hover .mat-form-field-underline,
  &.mat-focused .mat-form-field-underline {
    display: none;
  }

  // 给输入框添加普通文本框样式
  input.mat-input-element {
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 4px;
  }

  input.mat-input-element:focus {
    outline: none;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
  }
}

原有样式不生效的原因 #

1. 视图封装限制：Angular默认的Emulated视图封装会隔离组件内样式，无法穿透到Angular Material的内部子元素（如mat-form-field-outline、mat-form-field-underline）。
2. 样式目标错误：你修改的是input:focus的outline和box-shadow，但Material的悬停/聚焦边框是由mat-form-field的外层容器元素提供的，并非input本身的样式，所以直接修改input无效。

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