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

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 起：

使用

:disabled

CSS 选择器来定位禁用的

ion-button

将不起作用，因为它仅适用于可激活/可聚焦的元素，例如

button

或

input

，相反，您必须使用

[disabled]

。

此外，如果您设置了

color

的

ion-button

属性（例如

<ion-button color="danger">My button</ion-button>

，您无法使用

--background

CSS 属性更改背景颜色，而必须将

--ion-color-base

与

!important 一起使用） 

（你没有选择，因为 Ionic 已经定义了他们的 CSS 属性它）。

这是一个完整的例子：

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

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

Answer 3

ion-button {
    &[disabled] {
        opacity: 1;
        --background: #CCCCCC;
    }
}

Answer 4

在最新的 Ionic 8 中，可以使用以下 CSS 来更改禁用的 Fab 按钮的背景颜色：

ion-fab-button.fab-button-disabled::part(native)
{
    background: yellow;
}