禁用离子按钮的样式在离子V4中不起作用

Question

我正在使用离子v4，并且像往常一样，当禁用按钮时，我必须给其他颜色。但是无论我应用什么都没有显示任何效果。由于离子按钮不具有任何背景禁用属性，因此具有悬停，聚焦和活动状态。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>