For this simple ionic fab element:
<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>
the following style code does not work, and I can't understand why???
ion-fab-button {
&[disabled] {
--ion-color-base: var(--light-gray) !important;
--background: blue !important;
--color: green !important;
--opacity: 0.2;
}
}
For comparison, this test does work:
ion-fab-button {
--background: blue;
--color: green;
}
and also, with disabled true, the result is a greyed out button. So that property is getting applied.
It seems like it's not possible to target a [disabled] fab as easily as I thought it would???
NB: Proposed solutions here: Ionic change font color of disabled button do not appear to work in this case.
Below CSS works Use Part
ion-fab-button.fab-button-disabled::part(native)
{
background: yellow;
}