禁用按钮的离子更改字体颜色

Question

如何更改禁用按钮的字体颜色？

我有：

 <ion-col col-1><button class='buttoncell abc noactualbutton' ion-button [disabled]="true" [color]="white">{{row[8]}}</button></ion-col>

和 SCSS：

   .noactualbutton[disabled]{
      color: rgb(255, 255, 255) !important;
    }

但是，它仍然“更白”，但它仍然是灰色的......

Answer 1

当您禁用按钮不透明度自动设置为 0.4。您可以在禁用时将样式设置为按钮，如下所示：

.noactualbutton:disabled, noactualbutton[disabled]{
      color: white;
      opacity: 1;
      background: #b3b3b3;
  }

Answer 2

从 Ionic v4 开始：

使用:disabledCSS选择器来定位禁用的元素ion-button将不起作用，因为它只适用于可激活/可聚焦的元素，例如 abutton或 an input，相反，您必须使用[disabled].

另外，如果你已经设置了color你的属性ion-button（例如，<ion-button color="danger">My button</ion-button>你不能使用--backgroundCSS 属性更改背景颜色，而是必须使用--ion-color-basewith !important（你没有选择，因为 Ionic 已经用它定义了它们的 CSS 属性） 。

这是一个完整的例子：

<ion-button color="danger" [disabled]="true">
  My button
</ion-button>

ion-button[disabled] {
  --ion-color-base: #b34d5a !important;
}