如何单独为两个<mat-select>的mat-select-panel设置样式（样式未生效）

<mat-select class="units" formControlName="units" [value]="selectedUnits"
...

## 尝试的SCSS代码
```scss
::ng-deep  .units .mat-select-panel:not([class*=mat-elevation-z]){
    margin-left: 30px;
}

截图说明 #

• 截图1：第一个<mat-select-panel>对齐正常
• 截图2：第二个选择单元的<mat-select-panel>未正确对齐

全局样式 #

::ng-deep  .mat-select-panel:not([class*=mat-elevation-z]){
    margin-top: 48px;
    position: absolute;
    // margin-left: 30px;
}

完整HTML代码 #

<div fxLayout="row" fxLayoutGap="28px">
    <!-- Seller Field  -->
    <div fxLayout="column" fxLayoutAlign="center start">
      <div fxLayout="row" class="label">
        <mat-label>{{ 'RECORD-SALE-MODAL.LABEL.SELLER' | transloco }}&nbsp;*
          <i *ngIf="!form.get('seller').errors?.required" class="cash-green seller-check-mark fa fa-check fa-xs" aria-hidden="true"></i>
        </mat-label>&nbsp;
        <mat-error *ngIf="form.get('seller').errors?.required"><i class="ml-189 fa fa-times fa-xs"></i>
        </mat-error>
      </div>
      <mat-form-field appearance="outline" class="w-317">
        <mat-select formControlName="seller" placeholder="{{ 'RECORD-SALE-MODAL.PLACEHOLDER.SELLER' | transloco }}"
          required>
          <mat-option *ngFor="let seller of sellers" [value]="seller" (click)="getSellerLots(seller)">
            {{seller.accountName}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <!-- Units to sell Field  -->
    <div fxLayout="column" fxLayoutAlign="center start">
      <div fxLayout="row" class="label">
        <mat-label>{{ 'RECORD-SALE-MODAL.LABEL.UNITS-FOR-SELL' | transloco }}&nbsp;*
          <i *ngIf="!form.get('units').errors?.required" class="units-check-mark cash-green fa fa-check fa-xs" aria-hidden="true"></i>
        </mat-label>&nbsp;
        <mat-error *ngIf="form.get('units').errors?.required"><i class="ml-395 fa fa-times fa-xs"></i>
        </mat-error>
      </div>
      
      <mat-form-field appearance="outline" class="w-505">
        <mat-select formControlName="units" [value]="selectedUnits"
          placeholder="{{ 'RECORD-SALE-MODAL.PLACEHOLDER.UNITS-FOR-SELL' | transloco }}" required multiple>
          <mat-option *ngFor="let unit of selectedUnits" [value]="unit">{{unit.name}}</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>

问题根源是：<mat-select-panel>并非<mat-select>的直接子元素，Angular会将它渲染到组件外部（通常是<body>节点下），所以你写的.units .mat-select-panel选择器无法匹配到目标元素。

以下是几种可行的解决方法：

方法1：使用panelClass属性（推荐） #

Angular Material的<mat-select>提供了panelClass输入属性，可直接为对应的<mat-select-panel>添加自定义类，无需依赖DOM结构：

1. 修改第二个<mat-select>的HTML：

<mat-select formControlName="units" [value]="selectedUnits" panelClass="units-select-panel"
  placeholder="{{ 'RECORD-SALE-MODAL.PLACEHOLDER.UNITS-FOR-SELL' | transloco }}" required multiple>
  <mat-option *ngFor="let unit of selectedUnits" [value]="unit">{{unit.name}}</mat-option>
</mat-select>

2. 编写SCSS样式：

::ng-deep .units-select-panel:not([class*=mat-elevation-z]) {
    margin-left: 30px;
}

方法2：通过父容器类+属性选择器定位 #

给第二个<mat-form-field>添加自定义类，结合<mat-select>的aria-controls属性（该属性值等于对应<mat-select-panel>的ID）来定位：

1. 修改HTML中的<mat-form-field>：

<mat-form-field appearance="outline" class="w-505 units-form-field">
  <mat-select formControlName="units" [value]="selectedUnits" ...>
    ...
  </mat-select>
</mat-form-field>

2. 编写SCSS样式：

::ng-deep .units-form-field mat-select {
  $panelId: attr(aria-controls);
  & ~ ##{$panelId}:not([class*=mat-elevation-z]) {
    margin-left: 30px;
  }
}

方法3：提升样式优先级（不推荐） #

若要保留原有类名，可通过提升样式优先级来命中目标元素，但此方法依赖DOM顺序，可靠性较低：

::ng-deep body .units + .mat-select-panel:not([class*=mat-elevation-z]) {
    margin-left: 30px !important;
}

内容的提问来源于stack exchange，提问作者Philip Mutua