In my Angular Material project, I am creating a sample application with a form that includes a field with an input and dropdown. Currently, I have utilized flex styles and attributes as shown below:
<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>
However, when trying to apply the same style to the mat-select element, the background color is not displaying correctly. I specifically want the background color to be applied accurately to the dropdown menu.
As I am still in the process of learning Angular Material, any solutions or suggestions on how to achieve this would be greatly appreciated. Thank you in advance!