Ionic 4 ion-item详情箭头透明度无法修改求助

问题场景 #

使用带detail属性的ion-item时，列表右侧的详情箭头默认透明度为0.2，尝试通过SVG选择器、ion-item选择器覆盖样式，以及在global.scss中定义.item-detail-icon样式并使用--detail-icon-opacity变量，均无法将透明度修改为1.0，变量未生效。

相关代码：

<ion-item detail *ngIf="c.cv" [routerLink]="['/contact',c.uid]">...</ion-item>

尝试的样式：

.item-detail-icon {
  color: var(--detail-icon-color);
  font-size: var(--detail-icon-font-size);
  opacity: var(--detail-icon-opacity);
}

解决方案 #

方案1：全局覆盖CSS变量

Ionic的组件样式变量需要在全局作用域下定义才能生效，在global.scss中添加：

:root {
  --detail-icon-opacity: 1;
}

此方法会将所有带detail属性的ion-item详情箭头透明度统一设置为1。

方案2：针对单个/部分ion-item设置

如果只需修改特定ion-item的箭头样式，可利用Ionic组件暴露的part属性穿透Shadow DOM，在组件的SCSS文件中添加：

ion-item::part(detail-icon) {
  opacity: 1;
}

若样式优先级不够，可添加!important强制生效：

ion-item::part(detail-icon) {
  opacity: 1 !important;
}

方案3：直接在标签上设置变量

无需修改样式文件，直接在ion-item标签内通过style属性设置变量：

<ion-item detail *ngIf="c.cv" [routerLink]="['/contact',c.uid]" style="--detail-icon-opacity: 1;">...</ion-item>

原因说明 #

之前的方法失效是因为：

1. .item-detail-icon并非Ionic组件内部的正确选择器，无法穿透Shadow DOM选中详情箭头元素；
2. --detail-icon-opacity变量未在正确的作用域（如:root或目标元素本身）下定义，导致组件无法读取到自定义值。

内容的提问来源于stack exchange，提问作者Jérôme MARICHEZ