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

时间:2020-01-29 12:56:54

标签: css ionic4

我使用的是ionic 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;
}

1 个答案:

答案 0 :(得分:2)

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

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