javascript - 如何在 Angular 材质组件上设置样式？

Question

我目前正在为我的项目使用 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？

标签： javascriptangular