如何改变垫子形式字段宽度的角度

Question

我想更改我使用的角度材质的字段宽度，我尝试将css添加到全局样式.css和组件.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
}