Ionic 7迁移后，如何为无文本ion-input的标签应用自定义样式类？

问题分析 #

你原来的代码是将样式直接作用在独立的<ion-label>标签上；但Ionic7将label整合进了<ion-input>的Shadow DOM内部，直接把自定义类加到<ion-input>上时，样式只会作用于input容器本身，无法穿透到内部的label元素，所以样式不生效。

解决方案 #

利用Ionic组件的::part伪类穿透Shadow DOM，定位到<ion-input>内部的label元素，把原样式应用到该部件上：

1. 保留你修改后的HTML结构：

<ion-input
  class="form__select eva-form-label"
  labelPlacement="stacked"
  formControlName="item"
  placeholder="{{ getSelectPlaceholder() | translate }} *"
  (click)="openModal()"
></ion-input>

2. 修改SCSS样式，通过::part(label)指向内部label元素：

.eva-form-label {
  &::part(label) {
    font-size: 16px;
    margin-bottom: 7px;
    opacity: 1 !important;
    transform: none;
    -webkit-transform: none;
  }
}

原理说明 #

Ionic 7的<ion-input>采用Shadow DOM封装内部结构，labelPlacement="stacked"会在组件内部生成对应的label元素，并暴露名为label的部件（part）。通过::part(label)可以直接对这个内部label元素应用样式，完美复用你原来的eva-form-label类的样式规则。

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