angular - 如何以角度更改 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

尝试修改你的.mat-form-field-flex类cssmat-form-field

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

Answer 2

In your css file just add this css

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