如何将两个输入创建为一个表单字段并专门在 Angular Material 中应用样式？

Posted 2023-02-18

【中文标题】如何将两个输入创建为一个表单字段并专门在 Angular Material 中应用样式？

【英文标题】：How to create two inputs as one form field and apply style specifically in Angular Material?

【发布时间】：2022-01-16 09:12:21

【问题描述】：

使用 Angular Material，我正在构建一个带有表单的示例应用程序，该表单具有一个包含两个元素（输入字段和下拉菜单）的表单字段。

所以，我暂时实现了 flex 样式和属性，如下所示：

<div class="row">
    <mat-label>Dessert</mat-label>
</div>
<div fxLayout="row"> 
    <mat-form-field appearance="outline" fxFlex="80">
        <input matInput type="text" formControlName="">
    </mat-form-field>
    <mat-form-field appearance="outline" fxFlex="20" style="background-color: yellow;">
        <mat-select formControlName="quantity"> 
            <mat-option value="gm">Grams</mat-option>
            <mat-option value="kg">Kilos</mat-option>
            <mat-option value="mg">Milligrams</mat-option>
        </mat-select>
    </mat-form-field>
</div>

如果我对 mat-select 应用相同的样式，那么样式也应用不正确。

我需要将背景颜色完全应用于下拉菜单。

我正在学习 Angular Material，因此对此提供的任何解决方案都非常感谢并提前致谢。

【参考方案1】：

将类设置为 mat-form-field

Stackblitz 示例 stackblitz

 <mat-form-field appearance="outline" class="bg__yellow">
    <mat-select>
      <mat-option value="gm">Grams</mat-option>
      <mat-option value="kg">Kilos</mat-option>
      <mat-option value="mg">Milligrams</mat-option>
    </mat-select>
  </mat-form-field>

然后在css文件中

::ng-deep mat-form-field.bg__yellow .mat-form-field-outline 
  background-color: yellow;

【讨论】：

嗨@dan vid，谢谢你的回答，但这也没有用，我应该只使用appearance="outline"。

你好@bts_dev，我已经编辑了答案

哇@dan vid，效果很好。非常感谢你！ :)