有没有办法将CSS样式应用于禁用的ion-select-option

Question

我有一个状态列表，我希望用户选择一个状态，并非所有状态都已启用，某些状态将被禁用。 我希望禁用的选项具有某些CSS样式（例如灰色）

    <ion-select [(ngModel)]="selectedStatus">
      <ion-select-option [disabled]="isStatusDisabled(o)" *ngFor="let o of appointmentStatusOptions" [value]="o">
        {{appointmentStatus[o]}}</ion-select-option>
    </ion-select>

我厌倦了通过：disabled来选择元素：

ion-select-option[disabled] {
--color:gray;
}

并尝试将所有禁用项更改为分散操作，例如：

:disabled {
--color:gray;
}

浏览器根本不显示css样式

Answer 1

ionic为.select-disabled选择添加了disabled类，因此您可以尝试在CSS中指定该类

Answer 2

要全局更改，可以在组件样式表中添加它：

::shadow /deep/ button[disabled] .alert-radio-label {
  color: gray;
}

或在global.scss上

ion-alert button[disabled] .alert-radio-label {
  color: gray;
  // color: var(--ion-color-gray, gray);
}