无法将 CSS 样式应用到嵌套组件中的 Angular Material mat-icon

Question

我正在尝试将自定义样式应用于 Angular Material 组件内的 mat-icon 元素，但无论我做什么，样式都不会生效。这是我的代码的简化版本：

HTML：

<mat-form-field appearance="fill" class="example-field">
  <mat-label>Select an Option</mat-label>
  <mat-select [formControl]="exampleControl" (selectionChange)="onOptionSelected($event.value)">
    <mat-option *ngFor="let option of availableOptions" [value]="option">
      <mat-icon [inline]="true">settings</mat-icon>
      {{ "example.option." + option | lowercase | translate }}
    </mat-option>
  </mat-select>
</mat-form-field>

CSS：

:host {
  ::ng-deep {
    mat-form-field {
      mat-select {
        mat-option {
          mat-icon {
            margin-right: 0;
          }
        }
      }
    }
  }
}

Answer 1

选择下拉列表附加到根元素而不是组件内部。为了克服这个问题，您可以使用

panelClass

将类添加到下拉根目录，然后设置内部内容的样式。

---

来自全球风格：

.custom-dropdown {
  mat-option.mat-mdc-option {
    mat-icon.mat-icon,
    mat-icon.mat-pseudo-checkbox-full {
      margin-right: 0;
    }
  }
}