修改 Angular 16 mat-form-field 样式

Question

我希望更改 Angular Material 的 MatFormField 的默认样式。我想减少表单字段中输入字段的内部填充，并减少每个表单字段之间的间隙。

我知道我可能需要修改 Angular 在组件上放置的一些 css 样式，但我不知道到底需要更改什么。

我当前如何使用表单字段的示例（我想减少每个表单字段之间的间隙并减少输入字段中的填充）

<mat-form-field class="col-span-12">
            <input 
            type="text"
            matInput
            ngModel
            (input)="filter(selectedLayer.value)"
            name="select"
            #selectedLayer="ngModel"
            [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedOption($event)">
                    <mat-option *ngFor="let option of filteredOptions" [value]="option">
                        {{ option.label }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>
<mat-form-field class="col-span-4">
            <input
            #fieldInput="ngModel"
            type="text"
            matInput
            disabled
            ngModel
            name="field">
</mat-form-field>

我想要覆盖 css 中表单字段的样式，但它并没有真正起作用，基本上可视化中没有任何变化。

我开始思考是否应该创建自己的组件并扩展材质组件？

Answer 1

您可以尝试对其应用CSS，例如设置其宽度和字体大小。

例如：

mat-form-field{
    width: 90%;
    font-size: 12px;
  }

只需检查这是否是您想要的东西，或者也许我错了。