如何修改禁用状态下ion-button的颜色与透明度？

问题原因 #

你遇到的0.4透明度残留问题，是因为Ionic的ion-button在禁用状态下，其内部的原生按钮元素（位于shadow DOM中）会被单独设置透明度，仅修改组件根元素的--opacity或--ion-button-disabled-opacity无法完全覆盖这个设置。

修正方案 #

使用Ionic提供的::part(native)选择器，直接针对内部原生按钮元素强制设置透明度：

ion-button[disabled] {
  --ion-color-base: var(--light-gray) !important;
  --ion-color-contrast: var(--gray) !important;
  --ion-button-disabled-opacity: 1 !important;
}

ion-button[disabled]::part(native) {
  opacity: 1 !important;
}

官方配置参考 #

Ionic的ion-button组件有一套专门用于控制禁用状态的CSS自定义属性，无需自行试错组合，核心变量包括：

• --ion-color-base-disabled: 禁用状态下的按钮基础色（推荐替代直接设置--ion-color-base）
• --ion-color-contrast-disabled: 禁用状态下的文本对比色
• --ion-button-disabled-opacity: 按钮容器的透明度
• --opacity: 内部原生按钮元素的透明度

这些变量的详细说明会在对应Ionic版本的ion-button组件文档的「CSS Custom Properties」章节中完整列出。

内容的提问来源于stack exchange，提问作者monkey