Ionic 8如何修改禁用状态下FAB按钮的颜色？

问题场景 #

现有如下Ionic FAB元素代码：

<ion-fab slot="fixed" vertical="bottom" horizontal="start">
  <ion-fab-button [disabled]="disabled">
    <ion-icon size="large" src="monkey-assets/icons/ui-icons/plus.svg"></ion-icon>
  </ion-fab-button>
</ion-fab>

尝试用以下样式修改禁用状态的颜色，但无法生效：

ion-fab-button {
  &[disabled] {
    --ion-color-base: var(--light-gray) !important;
    --background: blue  !important;
    --color: green  !important;
    --opacity: 0.2;
  }
}

对比测试显示，普通样式代码可正常生效：

ion-fab-button {
  --background: blue;
  --color: green;
}

已确认disabled设为true时按钮会默认变灰，说明禁用属性生效，但自定义禁用样式无法作用，常规的禁用按钮样式修改方案也不适用于此场景。

解决办法 #

Ionic的FAB按钮禁用状态有专属的CSS变量，需通过这些变量定制样式，而非直接覆盖通用变量。正确的样式代码如下：

ion-fab-button {
  &[disabled] {
    --background-disabled: var(--light-gray);
    --color-disabled: green;
    --opacity-disabled: 0.2;
  }
}

原理说明 #

Ionic组件为禁用状态预设了优先级更高的专属CSS变量，直接修改通用的--background、--color会被组件内置的禁用样式覆盖，因此必须使用对应状态的专属变量才能生效。

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