Mat-form-field - 失焦时的样式和 mat-input 中的文本答案

【问题标题】：Mat-form-field - Styling when out of focus and with text in mat-inputMat-form-field - 失焦时的样式和 mat-input 中的文本
【发布时间】：2021-07-31 07:07:02
【问题描述】：

当mat-input中有文本同时失焦时，我怎样才能使失焦样式不适用？

我想在失焦和带有文本时保留这些样式：

但现在这是我在失焦和文字时得到的结果：

此外，当没有文本和失焦时，该字段的外观如下：

我目前的风格：

.mat-form-field-appearance-outline .mat-form-field-outline {
    background-color: #FFFFFF66;
    border-radius: 10em;
    color: transparent;
    opacity: 0.5;
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: white;
    background-color: transparent;
}

提前谢谢你。

【问题讨论】：

标签： angular angular-material mat-form-field

【解决方案1】：

我在 cmets 中看到您已经注意到 Angular 删除了 mat-focused 类，因此直接将其应用于 mat-form-field 将不起作用。但是，我们应该能够将类应用到将匹配“focused”样式的包装容器。

div.mat-form-field-outline 嵌套在带有mat-form-field-appearance-outline 和mat-focused 的元素类
mat-label 元素嵌套在元素中时具有“聚焦”规则 mat-form-field 和 mat-focused 类。

因此我们可以向容器提供mat-form-field-appearance-outline 和mat-form-field 类，并根据表单字段值切换mat-focused 类。

<p>
  <span
    class="mat-form-field mat-form-field-appearance-outline"
    [ngClass]="{'mat-focused': field.value}"
  >
    <mat-form-field appearance="outline">
      <mat-label>Outline form field</mat-label>
      <input #field matInput placeholder="Placeholder" />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
      <mat-hint>Hint</mat-hint>
    </mat-form-field>
  </span>
</p>

https://stackblitz.com/edit/angular-ckvs4z?file=src/app/form-field-appearance-example.html

【讨论】：

你先生让我很开心！我不知道该怎么感谢你才足够。非常感谢您花时间帮助像我这样的新手初级开发人员:-)
没问题，看来你有一些很酷的东西，祝你好运
应该可以用类似的东西来做到这一点：.mat-focused mat-form-field:not(.mat-focused) - 如果你想看看，我更新了 stackblitz。跨度>
啊，好的。您应该可以使用 .mat-form-field-outline-thick 来定位它
你应该可以重命名它，假设你的项目设置为支持 sass。我建议使用它，因为它使许多乏味的 css 内容变得更加简单。对于这种特定情况，您也可以使用普通的 CSS 嵌套。