尝试使ion-datetime的样式与ion-input样式相同

问题描述

我想使ion-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>

谢谢！

解决方法

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

为了使其工作，我必须首先使用::part expose the part，而不是像这样不起作用：

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

我将其更改为：

ion-datetime {
  ...
}

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

它的工作原理与我现在想要的一样。