如何修改disabled状态下ion-input组件的透明度？

你猜的完全没错！Ionic的ion-input组件把原生input元素封装在了影子DOM里，直接写普通的CSS选择器根本碰不到内部的.native-input，所以你之前的样式才会失效。这里给你几个靠谱的解决办法：

• 使用Web Components标准的Part选择器（推荐）
  Ionic专门给内部的原生input暴露了input这个part，你可以直接通过::part(input)选中它，这样样式就能精准生效：

ion-input[disabled]::part(input) {
  opacity: 1 !important;
  background-color: var(--white);
}

• Angular项目可选：使用::ng-deep（注意是废弃语法）
  如果你的项目是Angular，也可以用::ng-deep穿透组件的样式隔离，但这个语法已经被标记为废弃，尽量优先用上面的part方法：

::ng-deep ion-input[disabled] .native-input {
  opacity: 1 !important;
  background-color: var(--white);
}

• 注意样式作用域
  不管用哪种方法，都要把这段CSS放在全局样式文件里（比如global.scss或者styles.css），如果写在组件的局部CSS里，默认是无法穿透影子DOM的哦。

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