Html 使用输入删除mat表单字段的边框（也用于悬停和焦点）

我很难设置我的

mat表单字段的样式


我想要的是从字段中删除边框，也就是当字段处于焦点且用户处于悬停状态时。现在我有这个：


我需要删除输入之外的边框。这是我的表单字段：

<mat-form-field class="search-field" appearance="outline">
  <mat-label>Search</mat-label>
  <input matInput type="text" >
  <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

正确应用了“第一个”样式，但没有正确应用边框样式。

此外，我也不完全确定这是最好的办法，但在文件中没有关于如何改变所有这些部分的指示
 许多材质样式都是通过
强制执行的！重要
标志。您可以尝试使用
覆盖它们！重要信息
在您的代码中，我不建议这样做，因为它甚至可能不起作用。您可以尝试使用
：ng deep
，tho。材料元素并不是真正的str8，所以无论哪种方式，你都必须“黑”进去。祝你好运：）

mat-form-field.search-field {
    .mat-form-field-flex {
        background-color: white;
        border-radius: 2rem;
        color: transparent;

        .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
            border-style: none;
        }

    }
}