angular - 角材料垫菜单无法设置内部垫形式字段的样式

Question

我有带有内部垫子表单字段的垫子菜单：

                <mat-menu #menu="matMenu" class="filterMenu">
                  <div class="header">
                    <h4>Filters</h4>
                    <p>Clear all</p>
                  </div>
                  <div class="row">
                    <div class="col-12">
                      <mat-form-field (click)="dp1.open()" appearance="outline"
                        class="material-field material-datepicker">
                        <mat-label>Start date</mat-label>
                        <input [max]="maxDateFrom" (dateChange)="onDateFromChange($event)" [disabled]="true"
                          matInput [matDatepicker]="dp1" [formControlName]="FilterFields.dateFrom" />
                        <button matRipple [matRippleCentered]="false" [matRippleDisabled]="false"
                          [matRippleUnbounded]="true" [matRippleRadius]="30" [matRippleColor]="'rgba(0, 0, 0, 0.4)'"
                          mat-button *ngIf="params.get(FilterFields.dateFrom).value" matSuffix mat-icon-button
                          aria-label="Clear" (click)="
                        params.get(FilterFields.dateFrom).setValue(undefined);
                        onDateFromChange(undefined);
                        $event.stopPropagation()
                      ">
                          <mat-icon class="mat-icon">close</mat-icon>
                        </button>
                        <mat-datepicker-toggle matPrefix [for]="dp1">
                          <span matDatepickerToggleIcon class="dp-icon">
                            insert_invitation
                          </span>
                        </mat-datepicker-toggle>
                        <mat-datepicker #dp1 disabled="false" [panelClass]="'custom-date-picker'"></mat-datepicker>
                      </mat-form-field>
                    </div>
                  </div>
                </mat-menu>

我可以轻松地设置 .header 样式（styles.scss 全局）：

 .filterMenu {
    .mat-menu-content {
 .header {
background:red;
}
}
}

但是当我设置材质字段时没有任何反应：

 .filterMenu {
    .mat-menu-content {
.material-field {
        width: 100%;
    }
}
}

如何更改mat菜单中材质字段的样式？

标签： angularangular-material