带有禁用功能的离子按钮样式在离子 V4 中不起作用

Question

我正在使用 ionic v4，当按钮被禁用时，我必须像往常一样提供不同的颜色。但是无论我应用什么都没有显示任何效果。由于 ion 按钮没有任何背景禁用 属性，因为它具有悬停、焦点和活动。 https://ionicframework.com/docs/api/button#css-custom-properties

这是我的代码：

 <ion-button type="submit" color="danger" disabled="true">Next</ion-button>

我试过以下方法：

css in variable.scss (approach 1)
---------------------------------
:host(.button-disabled) .button-native{
  background: blue;
  color: white;
}

css in my custom file (approach 2)
----------------------------------
ion-button[color='danger'].button.button-disabled{
  background: blue !important;
  --background: blue !important;
  --opacity: 1;
}

Answer 1

您可以根据禁用值在 html 中有条件地设置颜色：

<ion-button type="submit" [color]="isDisabled? 'danger':'primary'" [disabled]="isDisabled">Next</ion-button>

Answer 2

从 Ionic v4 开始：

使用 :disabled CSS 选择器定位禁用的 ion-button 将不起作用，因为它仅适用于 activable/focusable 元素，如 button 或input，相反，您必须使用 [disabled]（我不认为依赖 Ionic 设置的 .button-disabled class 是一个好习惯）。

如果您还没有设置 ion-button 的 color 属性，您可以简单地更改 --background CSS 属性.

但是，如果您设置了 ion-button 的 color 属性（例如 <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;
}