ion-button fill="clear" 속성 적용 시 출력 오류

<ion-button fill="clear" [disabled]="disabled">

<ion-button> 컴포넌트를 사용하는데 disabled 값이 false인데도 disabled 상태처럼 출력되는 문제가 발생했다. 그런데 회사 내의 컴퓨터로 동일하게 해당 오류가 재현되지 않았다. 확인해보니 disabled 값이 전환될 때 button-disabled class가 추가/삭제되는데 화면 출력은 바뀌지 않는 현상이었다.

ion-button[fill="clear"]:not(.button-disabled) {
  --opacity: 1 !important;
  opacity: 1 !important;
}

ion-button[disabled] {
  --opacity: 0.6 !important;
  opacity: 0.6 !important;
}

찾아낸 해결 방법은 disabled 상태의 ion-button은 강제로 opacity를 낮추고, button-disabled class가 포함되지 않은 clear 버튼은 opacity를 높인다. 해결!