如何更改垫形场的角度宽度？

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中的css类修改为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
}