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

Question

我正在使用 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，因此非常感谢为此提供的任何解决方案，并提前致谢。

Answer 1

将 class 设置为 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;
}

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

How to create two inputs as one form field and apply style specifically in Angular Material?

css

flexbox

angular-material

angular-material2

angular