我目前在我的项目中使用Angular 8。我遇到一个需要为Angular Material组件(例如mat-form-field)设置样式的问题。
这就是我们在模板中使用它的方式
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
在网站上实际上是这样呈现的
<mat-form-field _ngcontent-tin-c20="" class="mat-form-field ng-tns-c21-3 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<!---->
<!---->
<div class="mat-form-field-infix">
<input _ngcontent-tin-c20="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" matinput="" placeholder="Input" id="mat-input-0" aria-invalid="false" aria-required="false">
<span class="mat-form-field-label-wrapper">
<!---->
<label class="mat-form-field-label ng-tns-c21-3 mat-empty mat-form-field-empty ng-star-inserted" id="mat-form-field-label-1" for="mat-input-0" aria-owns="mat-input-0">
<!---->
<!---->
<span class="ng-tns-c21-3 ng-star-inserted">Input</span>
<!---->
<!---->
</label>
</span>
</div>
<!---->
</div>
<!---->
<div class="mat-form-field-underline ng-tns-c21-3 ng-star-inserted">
<span class="mat-form-field-ripple"></span>
</div>
<div class="mat-form-field-subscript-wrapper">
<!---->
<!---->
<div class="mat-form-field-hint-wrapper ng-tns-c21-3 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
<!---->
<div class="mat-form-field-hint-spacer"></div>
</div>
</div>
</div>
</mat-form-field>
例如,现在如何更改类mat-form-field-infix
的样式?