如何在角度中更改mat-form-field宽度？

Question

我想改变我使用的角度材料的字段的宽度，我尝试添加css到全局style.css和component.css，但它不起作用。有什么建议吗?谢谢。我有下面的样例字段。谢谢

#mycss (我尝试过的)

.mat-form-field-flex {
  display: inline-flex;
  align-items: baseline;
  box-sizing: border-box;
  width: 160%;
}

#HTML

 <div fxLayout="column">
                         <div fxLayout="row" fxLayoutGap="24px">
                          <div fxFlex fxLayout="row">
                            <mat-form-field appearance="outline" class="pr-4" fxFlex>
                              <mat-label>Label 1</mat-label>
  
                            </mat-form-field>
                          </div>
                          <div fxFlex></div>
                        </div>

                        <div fxLayout="row" fxLayoutGap="24px">
                          <div fxFlex fxLayout="row">
                            <mat-form-field appearance="outline" class="pr-4" fxFlex>
                              <mat-label>Label 2</mat-label>
                              <mat-select formControlName="choice" required>
                            </mat-form-field>
                          </div>
                          <div fxFlex></div>
                        </div>

Answer 1

尝试将css中的.mat-form-field-flex类修改为mat-form-field

mat-form-field {
  width: 300px !important
}

Answer 2

只需在您的css文件中添加此css

:host::ng-deep.mat-form-field {
   width : 100px; //enter whatever width you want
}