Ion-datetime-button所在Ion-item与Ion-select等高问题求助

要让包含ion-datetime-button的ion-item和ion-select的ion-item等高，你可以利用Ionic提供的**::part选择器**来修改Shadow DOM内部元素的样式，不需要直接操作Shadow Root。具体步骤如下：

1. 给目标ion-item添加自定义类 #

给两个包含日期选择器的ion-item加上一个自定义类（比如datetime-item），方便精准定位：

<!-- From -->
<ion-col size="12" size-sm="4">
  <ion-item class="datetime-item">
    <ion-icon name="calendar" slot="start"></ion-icon>
    <ion-label>From:</ion-label>
    <ion-datetime-button datetime="from" required></ion-datetime-button>
    <ion-modal [keepContentsMounted]="true">
      <ng-template>
        <ion-datetime
          (ionChange)="doRefresh()"
          id="from"
          locale="en-CH"
          presentation="date"
          [showDefaultButtons]="true"
          formControlName="from"
          [max]="optionsForm.get('to')?.value"
        >
          <span slot="title">Enter the starting point</span>
        </ion-datetime>
      </ng-template>
    </ion-modal>
  </ion-item>
</ion-col>
<!-- To -->
<ion-col size="12" size-sm="4">
  <ion-item class="datetime-item">
    <ion-icon name="calendar" slot="start"></ion-icon>
    <ion-label>To:</ion-label>
    <ion-datetime-button datetime="to" required></ion-datetime-button>
    <ion-modal [keepContentsMounted]="true">
      <ng-template>
        <ion-datetime
          (ionChange)="doRefresh()"
          id="to"
          locale="en-CH"
          presentation="date"
          [showDefaultButtons]="true"
          formControlName="to"
          [min]="optionsForm.get('from')?.value"
        >
          <span slot="title">Enter the date of the expense</span>
        </ion-datetime>
      </ng-template>
    </ion-modal>
  </ion-item>
</ion-col>

2. 添加CSS样式 #

在你的全局样式文件或者组件样式文件中添加以下代码：

/* 让ion-item占满父容器ion-col的高度 */
.datetime-item {
  height: 100%;
}

/* 通过::part修改ion-item内部Shadow DOM容器的高度 */
.datetime-item::part(native) {
  height: 100%;
  display: flex;
  align-items: center; /* 确保内部元素垂直居中，和ion-select的布局一致 */
}

/* 让datetime按钮占满剩余空间，保持布局对齐 */
.datetime-item ion-datetime-button {
  flex: 1;
  display: flex;
  align-items: center;
}

原理说明 #

Ionic组件的Shadow DOM开放了part属性供外部样式修改，native是ion-item内部核心容器的part名称。通过::part(native)可以直接设置这个容器的高度为100%，配合外层ion-item的height:100%，就能让整个日期选择器的item完全占满ion-col的可用空间，和ion-select的item高度保持一致。

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