删除带有输入的mat-form-field的边框（也用于悬停和聚焦）

Question

我很难设置mat-form-field的样式。
我想要的是从字段中删除边框，当字段已聚焦并且用户悬停时，也要删除边框。现在我有这个：

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

<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>

和.scss中的

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;
        }

    }
}

正确应用了“第一个”样式，但没有正确应用边框的样式。
我也不完全确定这是最好的方法，但是在文档中没有指示如何更改所有这些部分。

Answer 1

许多“材质”样式都通过!important标志来强制实施。您可以尝试在代码中使用!important覆盖它们，我不建议这样做，因为它甚至可能无法工作。您可以尝试使用::ng-deep。实质元素并不是真正可以进行修改的方法，因此无论哪种方式，您都必须“破解”。祝你好运：）