css - 试图使 ion-datetime 的风格与 ion-input 风格相同

Question

我想让 toion-datetime具有与输入样式相同的样式，以使我的设计保持一致。

为了清楚起见，请看下面的图片。

我尝试以与创建输入样式相同的方式修改 CSS 属性，但无法使文本垂直居中。应用vertical-align: middle或display: flex使用align-items: center不起作用。有没有办法实现这种行为？

这是我当前用于输入和日期时间的 CSS：

ion-input,
ion-datetime {
  background-color: #131313;
  border-radius: 10px;
  padding: 0 1.25rem !important;
  margin-top: 0.25rem;
  font-size: 1rem;
}

如果需要，这是我的模板：

<IonRow>
  <IonCol>
    <IonItem lines="none" class="ion-no-padding">
      <IonLabel position="stacked">Birth Place</IonLabel>
      <IonInput v-model="data.birthplace" />
    </IonItem>
  </IonCol>
  <IonCol>
    <IonItem lines="none" class="ion-no-padding">
      <IonLabel position="stacked">Birth Date</IonLabel>
      <IonDatetime id="datetime-input" v-model="data.birthdate" />
    </IonItem>
  </IonCol>
</IonRow>

提前致谢！

Answer 1

刚刚找到答案，仔细阅读文档并从devtools分析DOM的结构后，我意识到文本被封装在shadow-dom中。

为了使它工作，我必须首先使用暴露部分::part，所以不要像这样这样做，这是行不通的：

ion-datetime {
  ...
  display: flex;
  align-items: center;
}

我把它改成这样：

ion-datetime {
  ...
}

ion-datetime::part(text) {
  display: flex;
  align-items: center;
}

它就像我现在想要的那样工作。