html - 使用输入删除 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，寿。材料元素并不是真正的 str8 向前修改，所以无论哪种方式，你都必须“破解”它。祝你好运 ：）