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

Question

我有一个状态列表，我希望用户 select 一个状态，并非所有状态都启用，其中一些将被禁用。我希望禁用的选项具有一些 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>

我已经厌倦了 select 元素 :disabled like:

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

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

:disabled {
--color:gray;
}

css 样式根本不会出现在浏览器中

Answer 1

ionic 为 disabled select 添加 class .select-disabled 因此您可以尝试在 css

中指定

Answer 2

要全局更改，您可以在组件样式中添加它 sheet:

::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);
}

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

Is there a way to apply css style to a disabled ion-select-option

css

ionic-framework

ionic4